{"id":400,"date":"2024-09-18T22:51:26","date_gmt":"2024-09-18T15:51:26","guid":{"rendered":"https:\/\/fstack.io.vn\/?p=400"},"modified":"2024-10-07T23:29:41","modified_gmt":"2024-10-07T16:29:41","slug":"nextjs-la-gi-kien-thuc-co-ban-ve-nextjs-ban-nen-biet","status":"publish","type":"post","link":"https:\/\/fstack.io.vn\/blog\/nextjs-la-gi-kien-thuc-co-ban-ve-nextjs-ban-nen-biet\/","title":{"rendered":"NextJS l\u00e0 g\u00ec? Ki\u1ebfn th\u1ee9c c\u01a1 b\u1ea3n v\u1ec1 NextJS  b\u1ea1n n\u00ean bi\u1ebft"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"400\" class=\"elementor elementor-400\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bbcb933 e-flex e-con-boxed e-con e-parent\" data-id=\"bbcb933\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bf727a7 elementor-widget elementor-widget-heading\" data-id=\"bf727a7\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Danh m\u1ee5c b\u00e0i vi\u1ebft<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/fstack.io.vn\/blog\/nextjs-la-gi-kien-thuc-co-ban-ve-nextjs-ban-nen-biet\/#NextJs_la_gi\" >NextJs l\u00e0 g\u00ec?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/fstack.io.vn\/blog\/nextjs-la-gi-kien-thuc-co-ban-ve-nextjs-ban-nen-biet\/#Cac_tinh_nang_chinh\" >C\u00e1c t\u00ednh n\u0103ng ch\u00ednh<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"NextJs_la_gi\"><\/span>NextJs l\u00e0 g\u00ec?<span class=\"ez-toc-section-end\"><\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-85c07d8 elementor-widget elementor-widget-text-editor\" data-id=\"85c07d8\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Next.js l\u00e0 m\u1ed9t khu\u00f4n kh\u1ed5 <a href=\"https:\/\/fstack.io.vn\/blog\/react-query-la-gi-tai-sao-nen-dung-react-query\/\">React<\/a> \u0111\u1ec3 x\u00e2y d\u1ef1ng c\u00e1c \u1ee9ng d\u1ee5ng web full-stack. B\u1ea1n s\u1eed d\u1ee5ng React Components \u0111\u1ec3 x\u00e2y d\u1ef1ng <a href=\"https:\/\/fstack.io.vn\/blog\/du-an\/\">giao di\u1ec7n<\/a> ng\u01b0\u1eddi d\u00f9ng v\u00e0 Next.js \u0111\u1ec3 c\u00f3 th\u00eam c\u00e1c t\u00ednh n\u0103ng v\u00e0 t\u1ed1i \u01b0u h\u00f3a.<\/p><p>B\u00ean trong, Next.js c\u0169ng tr\u1eebu t\u01b0\u1ee3ng h\u00f3a v\u00e0 t\u1ef1 \u0111\u1ed9ng c\u1ea5u h\u00ecnh c\u00e1c <a href=\"https:\/\/fstack.io.vn\/blog\/top-10-cong-cu-digital-marketing-co-ban-cho-nguoi-moi-bat-dau\/\">c\u00f4ng c\u1ee5<\/a> c\u1ea7n thi\u1ebft cho React, nh\u01b0 \u0111\u00f3ng g\u00f3i, bi\u00ean d\u1ecbch, v.v. \u0110i\u1ec1u n\u00e0y cho ph\u00e9p b\u1ea1n t\u1eadp trung v\u00e0o vi\u1ec7c x\u00e2y d\u1ef1ng \u1ee9ng d\u1ee5ng c\u1ee7a m\u00ecnh thay v\u00ec d\u00e0nh th\u1eddi gian cho vi\u1ec7c c\u1ea5u h\u00ecnh.<\/p><p>Cho d\u00f9 b\u1ea1n l\u00e0 m\u1ed9t nh\u00e0 ph\u00e1t tri\u1ec3n c\u00e1 nh\u00e2n hay l\u00e0 m\u1ed9t ph\u1ea7n c\u1ee7a m\u1ed9t nh\u00f3m l\u1edbn h\u01a1n, Next.js c\u00f3 th\u1ec3 gi\u00fap b\u1ea1n x\u00e2y d\u1ef1ng c\u00e1c \u1ee9ng d\u1ee5ng React t\u01b0\u01a1ng t\u00e1c, n\u0103ng \u0111\u1ed9ng v\u00e0 nhanh ch\u00f3ng.<\/p><p><a href=\"https:\/\/fstack.io.vn\/blog\/ve-chung-toi\/\">fstack<\/a>, v\u1ec1 ch\u00fang t\u00f4i<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-187e477 e-flex e-con-boxed e-con e-parent\" data-id=\"187e477\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7973d08 elementor-widget elementor-widget-heading\" data-id=\"7973d08\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"Cac_tinh_nang_chinh\"><\/span>C\u00e1c t\u00ednh n\u0103ng ch\u00ednh<span class=\"ez-toc-section-end\"><\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cfda05f elementor-widget elementor-widget-text-editor\" data-id=\"cfda05f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>M\u1ed9t s\u1ed1 t\u00ednh n\u0103ng ch\u00ednh c\u1ee7a Next.js bao g\u1ed3m:<\/p><table class=\"w-full table-auto\"><tbody><tr><td><a href=\"https:\/\/nextjs.org\/docs\/app\/building-your-application\/routing\" rel=\"nofollow noopener\" target=\"_blank\">Routing<\/a><\/td><td>B\u1ed9 \u0111\u1ecbnh tuy\u1ebfn d\u1ef1a tr\u00ean h\u1ec7 th\u1ed1ng t\u1eadp tin \u0111\u01b0\u1ee3c x\u00e2y d\u1ef1ng tr\u00ean Server Components h\u1ed7 tr\u1ee3 b\u1ed1 c\u1ee5c, \u0111\u1ecbnh tuy\u1ebfn l\u1ed3ng nhau, tr\u1ea1ng th\u00e1i t\u1ea3i, x\u1eed l\u00fd l\u1ed7i, v.v.<\/td><\/tr><tr><td><a href=\"https:\/\/nextjs.org\/docs\/app\/building-your-application\/rendering\" rel=\"nofollow noopener\" target=\"_blank\">Rendering<\/a><\/td><td>K\u1ebft xu\u1ea5t ph\u00eda m\u00e1y kh\u00e1ch v\u00e0 ph\u00eda m\u00e1y ch\u1ee7 v\u1edbi c\u00e1c th\u00e0nh ph\u1ea7n m\u00e1y kh\u00e1ch v\u00e0 m\u00e1y ch\u1ee7. T\u1ed1i \u01b0u h\u00f3a h\u01a1n n\u1eefa v\u1edbi K\u1ebft xu\u1ea5t t\u0129nh v\u00e0 \u0111\u1ed9ng tr\u00ean m\u00e1y ch\u1ee7 v\u1edbi Next.js. Ph\u00e1t tr\u1ef1c tuy\u1ebfn tr\u00ean Edge v\u00e0 th\u1eddi gian ch\u1ea1y <a href=\"https:\/\/fstack.io.vn\/blog\/node-js-la-gi-tat-tan-tat-ve-node-js\/\">Node.js<\/a>.<\/td><\/tr><tr><td><a href=\"https:\/\/nextjs.org\/docs\/app\/building-your-application\/data-fetching\" rel=\"nofollow noopener\" target=\"_blank\">Data Fetching<\/a><\/td><td>L\u1ea5y d\u1eef li\u1ec7u Vi\u1ec7c l\u1ea5y d\u1eef li\u1ec7u \u0111\u01b0\u1ee3c \u0111\u01a1n gi\u1ea3n h\u00f3a v\u1edbi async\/await trong Server Components v\u00e0 API l\u1ea5y d\u1eef li\u1ec7u m\u1edf r\u1ed9ng \u0111\u1ec3 ghi nh\u1edb y\u00eau c\u1ea7u, l\u01b0u tr\u1eef \u0111\u1ec7m d\u1eef li\u1ec7u v\u00e0 x\u00e1c th\u1ef1c l\u1ea1i.<\/td><\/tr><tr><td><a href=\"https:\/\/nextjs.org\/docs\/app\/building-your-application\/styling\" rel=\"nofollow noopener\" target=\"_blank\">Styling<\/a><\/td><td>H\u1ed7 tr\u1ee3 c\u00e1c ph\u01b0\u01a1ng ph\u00e1p t\u1ea1o ki\u1ec3u \u01b0a th\u00edch c\u1ee7a b\u1ea1n, bao g\u1ed3m CSS Modules, Tailwind CSS v\u00e0 CSS-in-JS<\/td><\/tr><tr><td><a href=\"https:\/\/nextjs.org\/docs\/app\/building-your-application\/optimizing\" rel=\"nofollow noopener\" target=\"_blank\">Optimizations<\/a><\/td><td>T\u1ed1i \u01b0u h\u00f3a h\u00ecnh \u1ea3nh, ph\u00f4ng ch\u1eef v\u00e0 t\u1eadp l\u1ec7nh \u0111\u1ec3 c\u1ea3i thi\u1ec7n Core Web Vitals v\u00e0 tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng c\u1ee7a \u1ee9ng d\u1ee5ng.<\/td><\/tr><tr><td><a href=\"https:\/\/nextjs.org\/docs\/app\/building-your-application\/configuring\/typescript\" rel=\"nofollow noopener\" target=\"_blank\">TypeScript<\/a><\/td><td>C\u1ea3i thi\u1ec7n h\u1ed7 tr\u1ee3 cho TypeScript, v\u1edbi kh\u1ea3 n\u0103ng ki\u1ec3m tra ki\u1ec3u t\u1ed1t h\u01a1n v\u00e0 bi\u00ean d\u1ecbch hi\u1ec7u qu\u1ea3 h\u01a1n, c\u0169ng nh\u01b0 Plugin TypeScript t\u00f9y ch\u1ec9nh v\u00e0 tr\u00ecnh ki\u1ec3m tra ki\u1ec3u.<\/td><\/tr><\/tbody><\/table>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5f9eda4 elementor-widget elementor-widget-heading\" data-id=\"5f9eda4\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<span class=\"elementor-heading-title elementor-size-default\"><a href=\"https:\/\/nextjs.org\/docs\" rel=\"nofollow noopener\" target=\"_blank\">C\u1ee5 th\u1ec3 h\u01a1n b\u1ea1n c\u00f3 xem th\u00eam \u1edf \u0111\u00e2y <\/a><\/span>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>NextJs l\u00e0 g\u00ec? Next.js l\u00e0 m\u1ed9t khu\u00f4n kh\u1ed5 React \u0111\u1ec3 x\u00e2y d\u1ef1ng c\u00e1c \u1ee9ng d\u1ee5ng web full-stack. B\u1ea1n s\u1eed d\u1ee5ng React Components \u0111\u1ec3 x\u00e2y d\u1ef1ng giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng v\u00e0 Next.js \u0111\u1ec3 c\u00f3 th\u00eam c\u00e1c t\u00ednh n\u0103ng v\u00e0 t\u1ed1i \u01b0u h\u00f3a. B\u00ean trong, Next.js c\u0169ng tr\u1eebu t\u01b0\u1ee3ng h\u00f3a v\u00e0 t\u1ef1 \u0111\u1ed9ng c\u1ea5u h\u00ecnh c\u00e1c c\u00f4ng [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":404,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1,25],"tags":[26,28,27],"class_list":["post-400","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cong-nghe","category-nextjs","tag-nextjs","tag-react","tag-spa"],"acf":[],"jetpack_featured_media_url":"https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/09\/next-js-optimizations.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/posts\/400","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/comments?post=400"}],"version-history":[{"count":10,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/posts\/400\/revisions"}],"predecessor-version":[{"id":1176,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/posts\/400\/revisions\/1176"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/media\/404"}],"wp:attachment":[{"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/media?parent=400"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/categories?post=400"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/tags?post=400"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}