{"id":416,"date":"2024-09-18T23:08:12","date_gmt":"2024-09-18T16:08:12","guid":{"rendered":"https:\/\/fstack.io.vn\/?p=416"},"modified":"2024-10-15T23:36:07","modified_gmt":"2024-10-15T16:36:07","slug":"routing-trong-nextjs-su-dung-app-router-ma-ban-nen-biet","status":"publish","type":"post","link":"https:\/\/fstack.io.vn\/blog\/routing-trong-nextjs-su-dung-app-router-ma-ban-nen-biet\/","title":{"rendered":"Routing trong NextJs s\u1eed d\u1ee5ng app router m\u00e0 b\u1ea1n n\u00ean bi\u1ebft"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"416\" class=\"elementor elementor-416\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9b694d3 e-con-full e-flex e-con e-parent\" data-id=\"9b694d3\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5128c28 elementor-widget elementor-widget-heading\" data-id=\"5128c28\" 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\/routing-trong-nextjs-su-dung-app-router-ma-ban-nen-biet\/#Co_ban_ve_routing\" >C\u01a1 b\u1ea3n v\u1ec1 routing<\/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\/routing-trong-nextjs-su-dung-app-router-ma-ban-nen-biet\/#Terminology\" >Terminology<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/fstack.io.vn\/blog\/routing-trong-nextjs-su-dung-app-router-ma-ban-nen-biet\/#The_app_Router\" >The app Router<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/fstack.io.vn\/blog\/routing-trong-nextjs-su-dung-app-router-ma-ban-nen-biet\/#Vai_tro_cua_thu_muc_va_tep\" >Vai tr\u00f2 c\u1ee7a th\u01b0 m\u1ee5c v\u00e0 t\u1ec7p<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/fstack.io.vn\/blog\/routing-trong-nextjs-su-dung-app-router-ma-ban-nen-biet\/#Route_Segments\" >Route Segments<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/fstack.io.vn\/blog\/routing-trong-nextjs-su-dung-app-router-ma-ban-nen-biet\/#Tuyen_duong_long_nhau\" >Tuy\u1ebfn \u0111\u01b0\u1eddng l\u1ed3ng nhau<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"Co_ban_ve_routing\"><\/span>C\u01a1 b\u1ea3n v\u1ec1 routing<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-1df33f0 elementor-widget elementor-widget-text-editor\" data-id=\"1df33f0\" 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>B\u1ed9 khung c\u1ee7a m\u1ecdi \u1ee9ng d\u1ee5ng l\u00e0 \u0111\u1ecbnh tuy\u1ebfn. Trang n\u00e0y s\u1ebd gi\u1edbi thi\u1ec7u cho b\u1ea1n c\u00e1c kh\u00e1i ni\u1ec7m c\u01a1 b\u1ea3n v\u1ec1 routing cho web v\u00e0 c\u00e1ch x\u1eed l\u00fd \u0111\u1ecbnh tuy\u1ebfn trong <a href=\"https:\/\/fstack.io.vn\/blog\/nextjs-la-gi-kien-thuc-co-ban-ve-nextjs-ban-nen-biet\/\">Next.js.<\/a><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-86b7082 e-con-full e-flex e-con e-parent\" data-id=\"86b7082\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ed9e77c elementor-widget elementor-widget-heading\" data-id=\"ed9e77c\" 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=\"Terminology\"><\/span>Terminology<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-127192f elementor-widget elementor-widget-text-editor\" data-id=\"127192f\" 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>\u0110\u1ea7u ti\u00ean, b\u1ea1n s\u1ebd th\u1ea5y nh\u1eefng thu\u1eadt ng\u1eef n\u00e0y \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng trong to\u00e0n b\u1ed9 t\u00e0i li\u1ec7u. Sau \u0111\u00e2y l\u00e0 m\u1ed9t tham kh\u1ea3o nhanh:<\/p>\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-361ff73 elementor-widget elementor-widget-image\" data-id=\"361ff73\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"800\" height=\"416\" src=\"https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/09\/terminology-component-tree-1024x532.avif\" class=\"attachment-large size-large wp-image-417\" alt=\"Routing trong NextJs s\u1eed d\u1ee5ng app router m\u00e0 b\u1ea1n n\u00ean bi\u1ebft\" srcset=\"https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/09\/terminology-component-tree-1024x532.avif 1024w, https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/09\/terminology-component-tree-300x156.avif 300w, https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/09\/terminology-component-tree-768x399.avif 768w, https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/09\/terminology-component-tree-1536x799.avif 1536w, https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/09\/terminology-component-tree.avif 1600w\" sizes=\"(max-width: 800px) 100vw, 800px\" title=\"\">\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">H\u00ecnh \u1ea3nh minh h\u1ecda<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\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-1806295 elementor-widget elementor-widget-text-editor\" data-id=\"1806295\" 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<ul><li><strong>Tree:<\/strong> M\u1ed9t quy \u01b0\u1edbc \u0111\u1ec3 tr\u1ef1c quan h\u00f3a <a href=\"https:\/\/fstack.io.vn\/blog\/4-cau-truc-du-lieu-va-giai-thuat-la-gi\/\">c\u1ea5u tr\u00fac<\/a> ph\u00e2n c\u1ea5p. V\u00ed d\u1ee5, m\u1ed9t c\u00e2y th\u00e0nh ph\u1ea7n v\u1edbi c\u00e1c th\u00e0nh ph\u1ea7n cha v\u00e0 con, c\u1ea5u tr\u00fac th\u01b0 m\u1ee5c, v.v.<\/li><li><strong>Subtree:<\/strong> M\u1ed9t ph\u1ea7n c\u1ee7a c\u00e2y, b\u1eaft \u0111\u1ea7u t\u1eeb m\u1ed9t g\u1ed1c m\u1edbi (\u0111\u1ea7u ti\u00ean) v\u00e0 k\u1ebft th\u00fac \u1edf l\u00e1 (last).<\/li><li><strong>Root<\/strong>: TN\u00fat \u0111\u1ea7u ti\u00ean trong c\u00e2y ho\u1eb7c c\u00e2y con, ch\u1eb3ng h\u1ea1n nh\u01b0 b\u1ed1 c\u1ee5c g\u1ed1c.<\/li><li><strong>Leaf:<\/strong> C\u00e1c n\u00fat trong m\u1ed9t c\u00e2y con kh\u00f4ng c\u00f3 n\u00fat con, ch\u1eb3ng h\u1ea1n nh\u01b0 \u0111o\u1ea1n cu\u1ed1i c\u00f9ng trong \u0111\u01b0\u1eddng d\u1eabn URL.<\/li><\/ul><figure><\/figure>\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-0c52d5d elementor-widget elementor-widget-image\" data-id=\"0c52d5d\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"800\" height=\"185\" src=\"https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/09\/terminology-url-anatomy-1024x237.avif\" class=\"attachment-large size-large wp-image-424\" alt=\"URL Segment\" srcset=\"https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/09\/terminology-url-anatomy-1024x237.avif 1024w, https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/09\/terminology-url-anatomy-300x70.avif 300w, https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/09\/terminology-url-anatomy-768x178.avif 768w, https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/09\/terminology-url-anatomy-1536x356.avif 1536w, https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/09\/terminology-url-anatomy.avif 1600w\" sizes=\"(max-width: 800px) 100vw, 800px\" title=\"\">\t\t\t\t\t\t\t\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-371168e elementor-widget elementor-widget-text-editor\" data-id=\"371168e\" 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<ul><li><strong>URL Segment:<\/strong> M\u1ed9t ph\u1ea7n c\u1ee7a \u0111\u01b0\u1eddng d\u1eabn URL \u0111\u01b0\u1ee3c ph\u00e2n c\u00e1ch b\u1eb1ng d\u1ea5u g\u1ea1ch ch\u00e9o.<\/li><li><strong>URL Path:<\/strong> M\u1ed9t ph\u1ea7n c\u1ee7a URL n\u1eb1m sau t\u00ean mi\u1ec1n (bao g\u1ed3m c\u00e1c ph\u00e2n \u0111o\u1ea1n).<\/li><\/ul>\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-ae6bf8b elementor-widget elementor-widget-heading\" data-id=\"ae6bf8b\" 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=\"The_app_Router\"><\/span>The app Router<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-b252478 elementor-widget elementor-widget-text-editor\" data-id=\"b252478\" 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>Trong phi\u00ean b\u1ea3n 13, Next.js \u0111\u00e3 gi\u1edbi thi\u1ec7u m\u1ed9t <strong>App Router<\/strong> m\u1edbi \u0111\u01b0\u1ee3c x\u00e2y d\u1ef1ng tr\u00ean <a href=\"https:\/\/nextjs.org\/docs\/app\/building-your-application\/rendering\/server-components\" rel=\"nofollow noopener\" target=\"_blank\">React Server Components<\/a>, h\u1ed7 tr\u1ee3 b\u1ed1 c\u1ee5c \u0111\u01b0\u1ee3c chia s\u1ebb, \u0111\u1ecbnh tuy\u1ebfn l\u1ed3ng nhau, tr\u1ea1ng th\u00e1i t\u1ea3i, x\u1eed l\u00fd l\u1ed7i, v.v.<\/p><p>App Router ho\u1ea1t \u0111\u1ed9ng trong m\u1ed9t th\u01b0 m\u1ee5c m\u1edbi c\u00f3 t\u00ean l\u00e0 <code>app<\/code>. Th\u01b0 m\u1ee5c <code>app<\/code> ho\u1ea1t \u0111\u1ed9ng c\u00f9ng v\u1edbi th\u01b0 m\u1ee5c <code>pages<\/code> \u0111\u1ec3 cho ph\u00e9p \u00e1p d\u1ee5ng gia t\u0103ng. \u0110i\u1ec1u n\u00e0y cho ph\u00e9p b\u1ea1n ch\u1ecdn m\u1ed9t s\u1ed1 tuy\u1ebfn \u0111\u01b0\u1eddng c\u1ee7a \u1ee9ng d\u1ee5ng v\u00e0o h\u00e0nh vi m\u1edbi trong khi v\u1eabn gi\u1eef c\u00e1c tuy\u1ebfn \u0111\u01b0\u1eddng kh\u00e1c trong th\u01b0 m\u1ee5c <code>pages<\/code> cho h\u00e0nh vi tr\u01b0\u1edbc \u0111\u00f3. N\u1ebfu \u1ee9ng d\u1ee5ng c\u1ee7a b\u1ea1n s\u1eed d\u1ee5ng th\u01b0 m\u1ee5c\u00a0<code>pages<\/code>\u00a0, vui l\u00f2ng xem th\u00eam t\u00e0i li\u1ec7u\u00a0<a href=\"https:\/\/nextjs.org\/docs\/pages\/building-your-application\/routing\" rel=\"nofollow noopener\" target=\"_blank\">Pages Router<\/a>\u00a0.<\/p><p>L\u01b0u \u00fd: App Router \u0111\u01b0\u1ee3c \u01b0u ti\u00ean h\u01a1n Pages Router. C\u00e1c tuy\u1ebfn \u0111\u01b0\u1eddng tr\u00ean c\u00e1c th\u01b0 m\u1ee5c kh\u00f4ng \u0111\u01b0\u1ee3c gi\u1ea3i quy\u1ebft th\u00e0nh c\u00f9ng m\u1ed9t \u0111\u01b0\u1eddng d\u1eabn URL v\u00e0 s\u1ebd g\u00e2y ra l\u1ed7i th\u1eddi gian x\u00e2y d\u1ef1ng \u0111\u1ec3 ng\u0103n ng\u1eeba xung \u0111\u1ed9t.<\/p>\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-330109d elementor-widget elementor-widget-image\" data-id=\"330109d\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"800\" height=\"222\" src=\"https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/09\/next-router-directories-1024x284.avif\" class=\"attachment-large size-large wp-image-425\" alt=\"The app Router\" srcset=\"https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/09\/next-router-directories-1024x284.avif 1024w, https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/09\/next-router-directories-300x83.avif 300w, https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/09\/next-router-directories-768x213.avif 768w, https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/09\/next-router-directories-1536x426.avif 1536w, https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/09\/next-router-directories.avif 1600w\" sizes=\"(max-width: 800px) 100vw, 800px\" title=\"\">\t\t\t\t\t\t\t\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-dc8104e elementor-widget elementor-widget-text-editor\" data-id=\"dc8104e\" 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>Theo m\u1eb7c \u0111\u1ecbnh, c\u00e1c th\u00e0nh ph\u1ea7n b\u00ean trong\u00a0<code>app<\/code>\u00a0l\u00e0\u00a0<a href=\"https:\/\/nextjs.org\/docs\/app\/building-your-application\/rendering\/server-components\" rel=\"nofollow noopener\" target=\"_blank\">Th\u00e0nh ph\u1ea7n m\u00e1y ch\u1ee7 React<\/a>. \u0110\u00e2y l\u00e0 m\u1ed9t t\u1ed1i \u01b0u h\u00f3a hi\u1ec7u su\u1ea5t v\u00e0 cho ph\u00e9p b\u1ea1n d\u1ec5 d\u00e0ng \u00e1p d\u1ee5ng ch\u00fang, v\u00e0 b\u1ea1n c\u0169ng c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng\u00a0<a href=\"https:\/\/nextjs.org\/docs\/app\/building-your-application\/rendering\/client-components\" rel=\"nofollow noopener\" target=\"_blank\">Th\u00e0nh ph\u1ea7n m\u00e1y kh\u00e1ch<\/a>.<\/p>\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-bf9ebc6 elementor-widget elementor-widget-heading\" data-id=\"bf9ebc6\" 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=\"Vai_tro_cua_thu_muc_va_tep\"><\/span>Vai tr\u00f2 c\u1ee7a th\u01b0 m\u1ee5c v\u00e0 t\u1ec7p<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-dac32e8 elementor-widget elementor-widget-text-editor\" data-id=\"dac32e8\" 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 s\u1eed d\u1ee5ng b\u1ed9 \u0111\u1ecbnh tuy\u1ebfn d\u1ef1a tr\u00ean h\u1ec7 th\u1ed1ng t\u1ec7p trong \u0111\u00f3:<\/p><ul><li><strong>Th\u01b0 m\u1ee5c<\/strong>\u00a0\u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 x\u00e1c \u0111\u1ecbnh c\u00e1c tuy\u1ebfn \u0111\u01b0\u1eddng. Tuy\u1ebfn \u0111\u01b0\u1eddng l\u00e0 m\u1ed9t \u0111\u01b0\u1eddng d\u1eabn duy nh\u1ea5t c\u1ee7a c\u00e1c th\u01b0 m\u1ee5c l\u1ed3ng nhau, theo h\u1ec7 th\u1ed1ng ph\u00e2n c\u1ea5p h\u1ec7 th\u1ed1ng t\u1ec7p t\u1eeb\u00a0<strong>th\u01b0 m\u1ee5c g\u1ed1c<\/strong>\u00a0xu\u1ed1ng \u0111\u1ebfn\u00a0<strong>th\u01b0 m\u1ee5c l\u00e1<\/strong>\u00a0cu\u1ed1i c\u00f9ng bao g\u1ed3m\u00a0t\u1ec7p <code>page.js<\/code>\u00a0. Xem\u00a0<a href=\"https:\/\/nextjs.org\/docs\/app\/building-your-application\/routing\/defining-routes\" rel=\"nofollow noopener\" target=\"_blank\">\u0110\u1ecbnh ngh\u0129a c\u00e1c tuy\u1ebfn \u0111\u01b0\u1eddng<\/a>.<\/li><li><strong>T\u1ec7p<\/strong>\u00a0\u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 t\u1ea1o <a href=\"https:\/\/fstack.io.vn\/blog\/du-an\/\">giao di\u1ec7n<\/a> ng\u01b0\u1eddi d\u00f9ng \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb cho m\u1ed9t ph\u00e2n \u0111o\u1ea1n tuy\u1ebfn \u0111\u01b0\u1eddng. Xem\u00a0<a href=\"https:\/\/nextjs.org\/docs\/app\/building-your-application\/routing#file-conventions\" rel=\"nofollow noopener\" target=\"_blank\">c\u00e1c t\u1ec7p \u0111\u1eb7c bi\u1ec7t<\/a>.<\/li><\/ul>\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-b5164c8 elementor-widget elementor-widget-heading\" data-id=\"b5164c8\" 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=\"Route_Segments\"><\/span>Route Segments<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-0417be7 elementor-widget elementor-widget-text-editor\" data-id=\"0417be7\" 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>Each folder in a route represents a\u00a0<strong>route segment<\/strong>. Each route segment is mapped to a corresponding\u00a0<strong>segment<\/strong>\u00a0in a\u00a0<strong>URL path<\/strong>.<\/p>\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-dd60b4b elementor-widget elementor-widget-image\" data-id=\"dd60b4b\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"297\" src=\"https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/09\/route-segments-to-path-segments-1024x380.avif\" class=\"attachment-large size-large wp-image-429\" alt=\"Route Segments\" srcset=\"https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/09\/route-segments-to-path-segments-1024x380.avif 1024w, https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/09\/route-segments-to-path-segments-300x111.avif 300w, https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/09\/route-segments-to-path-segments-768x285.avif 768w, https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/09\/route-segments-to-path-segments-1536x570.avif 1536w, https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/09\/route-segments-to-path-segments.avif 1600w\" sizes=\"(max-width: 800px) 100vw, 800px\" title=\"\">\t\t\t\t\t\t\t\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-d28790a elementor-widget elementor-widget-heading\" data-id=\"d28790a\" 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=\"Tuyen_duong_long_nhau\"><\/span>Tuy\u1ebfn \u0111\u01b0\u1eddng l\u1ed3ng nhau<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-eede5df elementor-widget elementor-widget-text-editor\" data-id=\"eede5df\" 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>\u0110\u1ec3 t\u1ea1o m\u1ed9t tuy\u1ebfn \u0111\u01b0\u1eddng l\u1ed3ng nhau, b\u1ea1n c\u00f3 th\u1ec3 l\u1ed3ng c\u00e1c th\u01b0 m\u1ee5c v\u00e0o nhau. V\u00ed d\u1ee5, b\u1ea1n c\u00f3 th\u1ec3 th\u00eam m\u1ed9t tuy\u1ebfn \u0111\u01b0\u1eddng m\u1edbi&nbsp;<code>\/dashboard\/settings<\/code> b\u1eb1ng c\u00e1ch l\u1ed3ng hai th\u01b0 m\u1ee5c m\u1edbi trong th\u01b0 m\u1ee5c&nbsp;<code>app<\/code>.<\/p>\n<p>Tuy\u1ebfn \u0111\u01b0\u1eddng&nbsp;<code>\/dashboard\/settings<\/code> bao g\u1ed3m ba ph\u00e2n \u0111o\u1ea1n:<\/p>\n<ul>\n<li><code>\/<\/code>&nbsp;(Ph\u00e2n \u0111o\u1ea1n g\u1ed1c)<\/li>\n<li><code>dashboard<\/code>&nbsp;(Ph\u00e2n \u0111o\u1ea1n)<\/li>\n<li><code>settings<\/code>&nbsp;(Ph\u00e2n \u0111o\u1ea1n )<\/li>\n<\/ul>\t\t\t\t\t\t\t\t<\/div>\n\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>C\u01a1 b\u1ea3n v\u1ec1 routing B\u1ed9 khung c\u1ee7a m\u1ecdi \u1ee9ng d\u1ee5ng l\u00e0 \u0111\u1ecbnh tuy\u1ebfn. Trang n\u00e0y s\u1ebd gi\u1edbi thi\u1ec7u cho b\u1ea1n c\u00e1c kh\u00e1i ni\u1ec7m c\u01a1 b\u1ea3n v\u1ec1 routing cho web v\u00e0 c\u00e1ch x\u1eed l\u00fd \u0111\u1ecbnh tuy\u1ebfn trong Next.js. Terminology \u0110\u1ea7u ti\u00ean, b\u1ea1n s\u1ebd th\u1ea5y nh\u1eefng thu\u1eadt ng\u1eef n\u00e0y \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng trong to\u00e0n b\u1ed9 t\u00e0i li\u1ec7u. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":417,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[26,28,29,27],"class_list":["post-416","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cong-nghe","tag-nextjs","tag-react","tag-routing","tag-spa"],"acf":[],"jetpack_featured_media_url":"https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/09\/terminology-component-tree.avif","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/posts\/416","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=416"}],"version-history":[{"count":20,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/posts\/416\/revisions"}],"predecessor-version":[{"id":2328,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/posts\/416\/revisions\/2328"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/media\/417"}],"wp:attachment":[{"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/media?parent=416"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/categories?post=416"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/tags?post=416"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}