const{Fragment:e,jsx:l,jsxs:n}=arguments[0];function _createMdxContent(r){const c={a:"a",code:"code",em:"em",figure:"figure",h1:"h1",h2:"h2",h3:"h3",h4:"h4",hr:"hr",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",span:"span",strong:"strong",ul:"ul",...r.components};return n(e,{children:[l(c.h1,{id:"routing-in-nextjs",children:l(c.a,{className:"subheading-anchor",href:"#routing-in-nextjs",children:"Routing in Next.js"})}),"\n",l(c.p,{children:"Next.js has a file-system-based routing system. The URLs you can access in your browser are determined by how you organize your files and folders within your project."}),"\n",l(c.h2,{id:"understanding-the-srcapp-directory",children:n(c.a,{className:"subheading-anchor",href:"#understanding-the-srcapp-directory",children:["Understanding the ",l(c.em,{children:"src/app"})," Directory"]})}),"\n",n(c.p,{children:["In Next.js (when using the App Router), the ",l(c.em,{children:"src/app"})," directory serves as the foundation for your application's structure. Key files inside this directory include:"]}),"\n",n(c.ul,{children:["\n",n(c.li,{children:[l(c.em,{children:"layout.tsx"})," – Defines the layout for your application, allowing you to persist UI elements across different pages."]}),"\n",n(c.li,{children:[l(c.em,{children:"page.tsx"})," – Represents the content of a particular route."]}),"\n"]}),"\n",l(c.h2,{id:"scenario-1-creating-a-homepage",children:l(c.a,{className:"subheading-anchor",href:"#scenario-1-creating-a-homepage",children:"Scenario 1: Creating a Homepage"})}),"\n",l(c.p,{children:"Suppose you want to have a homepage accessible at:"}),"\n",l(c.p,{children:l(c.em,{children:l(c.a,{href:"http://localhost:3000/",target:"_blank",rel:"nofollow",children:"http://localhost:3000/"})})}),"\n",n(c.p,{children:["To achieve this, ensure that a ",l(c.em,{children:"page.tsx"})," file exists inside the ",l(c.em,{children:"src/app"})," directory. By default, this file is created when you initialize a Next.js project."]}),"\n",l(c.h2,{id:"scenario-2-creating-additional-pages",children:l(c.a,{className:"subheading-anchor",href:"#scenario-2-creating-additional-pages",children:"Scenario 2: Creating Additional Pages"})}),"\n",l(c.p,{children:"Now, let's say you want to create additional pages with different URLs."}),"\n",l(c.h3,{id:"creating-an-about-page",children:l(c.a,{className:"subheading-anchor",href:"#creating-an-about-page",children:"Creating an About Page"})}),"\n",l(c.p,{children:"To create a page accessible at:"}),"\n",l(c.p,{children:l(c.em,{children:l(c.a,{href:"http://localhost:3000/about",target:"_blank",rel:"nofollow",children:"http://localhost:3000/about"})})}),"\n",l(c.p,{children:"Follow these steps:"}),"\n",n(c.ol,{children:["\n",n(c.li,{children:["Inside the ",l(c.em,{children:"src/app"})," directory, create a new folder named ",l(c.em,{children:"about"}),"."]}),"\n",n(c.li,{children:["Inside ",l(c.em,{children:"about"}),", create a ",l(c.em,{children:"page.tsx"})," file."]}),"\n",l(c.li,{children:"Add the following code:"}),"\n"]}),"\n",l(c.figure,{"data-rehype-pretty-code-figure":"",children:l(c.pre,{style:{backgroundColor:"#1e1e2e",color:"#cdd6f4"},tabIndex:"0","data-language":"tsx","data-theme":"catppuccin-mocha",children:n(c.code,{"data-language":"tsx","data-theme":"catppuccin-mocha",style:{display:"grid"},children:[n(c.span,{"data-line":"",children:[l(c.span,{style:{color:"#CBA6F7"},children:"export"}),l(c.span,{style:{color:"#CBA6F7"},children:" default"}),l(c.span,{style:{color:"#CBA6F7"},children:" function"}),l(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:" About"}),l(c.span,{style:{color:"#9399B2"},children:"()"}),l(c.span,{style:{color:"#9399B2"},children:" {"})]}),"\n",n(c.span,{"data-line":"",children:[l(c.span,{style:{color:"#CBA6F7"},children:" return"}),l(c.span,{style:{color:"#94E2D5"},children:" <"}),l(c.span,{style:{color:"#89B4FA"},children:"h1"}),l(c.span,{style:{color:"#94E2D5"},children:">"}),l(c.span,{style:{color:"#CDD6F4"},children:"Hello from About"}),l(c.span,{style:{color:"#94E2D5"},children:""}),l(c.span,{style:{color:"#9399B2"},children:";"})]}),"\n",l(c.span,{"data-line":"",children:l(c.span,{style:{color:"#9399B2"},children:"}"})})]})})}),"\n",l(c.h3,{id:"creating-a-custom-page-eg-sanskar-page",children:l(c.a,{className:"subheading-anchor",href:"#creating-a-custom-page-eg-sanskar-page",children:"Creating a Custom Page (e.g., Sanskar Page)"})}),"\n",l(c.p,{children:"If you want a page accessible at:"}),"\n",l(c.p,{children:l(c.em,{children:l(c.a,{href:"http://localhost:3000/sanskar",target:"_blank",rel:"nofollow",children:"http://localhost:3000/sanskar"})})}),"\n",l(c.p,{children:"Follow the same steps as above:"}),"\n",n(c.ol,{children:["\n",n(c.li,{children:["Inside ",l(c.em,{children:"src/app"}),", create a folder named ",l(c.em,{children:"sanskar"}),"."]}),"\n",n(c.li,{children:["Inside ",l(c.em,{children:"sanskar"}),", create a ",l(c.em,{children:"page.tsx"})," file."]}),"\n",l(c.li,{children:"Add the following code:"}),"\n"]}),"\n",l(c.figure,{"data-rehype-pretty-code-figure":"",children:l(c.pre,{style:{backgroundColor:"#1e1e2e",color:"#cdd6f4"},tabIndex:"0","data-language":"tsx","data-theme":"catppuccin-mocha",children:n(c.code,{"data-language":"tsx","data-theme":"catppuccin-mocha",style:{display:"grid"},children:[n(c.span,{"data-line":"",children:[l(c.span,{style:{color:"#CBA6F7"},children:"export"}),l(c.span,{style:{color:"#CBA6F7"},children:" default"}),l(c.span,{style:{color:"#CBA6F7"},children:" function"}),l(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:" Sanskar"}),l(c.span,{style:{color:"#9399B2"},children:"()"}),l(c.span,{style:{color:"#9399B2"},children:" {"})]}),"\n",n(c.span,{"data-line":"",children:[l(c.span,{style:{color:"#CBA6F7"},children:" return"}),l(c.span,{style:{color:"#94E2D5"},children:" <"}),l(c.span,{style:{color:"#89B4FA"},children:"h1"}),l(c.span,{style:{color:"#94E2D5"},children:">"}),l(c.span,{style:{color:"#CDD6F4"},children:"Hello from Sanskar"}),l(c.span,{style:{color:"#94E2D5"},children:""}),l(c.span,{style:{color:"#9399B2"},children:";"})]}),"\n",l(c.span,{"data-line":"",children:l(c.span,{style:{color:"#9399B2"},children:"}"})})]})})}),"\n",l(c.h3,{id:"folder-structure-for-the-pages",children:l(c.a,{className:"subheading-anchor",href:"#folder-structure-for-the-pages",children:"Folder Structure for the Pages"})}),"\n",n(c.p,{children:["After adding these pages, your ",l(c.em,{children:"src/app"})," directory will look like this:"]}),"\n",l(c.figure,{"data-rehype-pretty-code-figure":"",children:l(c.pre,{style:{backgroundColor:"#1e1e2e",color:"#cdd6f4"},tabIndex:"0","data-language":"sh","data-theme":"catppuccin-mocha",children:n(c.code,{"data-language":"sh","data-theme":"catppuccin-mocha",style:{display:"grid"},children:[l(c.span,{"data-line":"",children:l(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:"src/app/"})}),"\n",n(c.span,{"data-line":"",children:[l(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:" layout.tsx"}),l(c.span,{style:{color:"#A6E3A1"},children:" -"}),l(c.span,{style:{color:"#A6E3A1"},children:" Defines"}),l(c.span,{style:{color:"#A6E3A1"},children:" layout"}),l(c.span,{style:{color:"#A6E3A1"},children:" structure"})]}),"\n",n(c.span,{"data-line":"",children:[l(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:" page.tsx"}),l(c.span,{style:{color:"#A6E3A1"},children:" -"}),l(c.span,{style:{color:"#A6E3A1"},children:" Homepage"})]}),"\n",l(c.span,{"data-line":"",children:l(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:" about/"})}),"\n",n(c.span,{"data-line":"",children:[l(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:" page.tsx"}),l(c.span,{style:{color:"#A6E3A1"},children:" -"}),l(c.span,{style:{color:"#A6E3A1"},children:" About"}),l(c.span,{style:{color:"#A6E3A1"},children:" Page"})]}),"\n",l(c.span,{"data-line":"",children:l(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:" sanskar/"})}),"\n",n(c.span,{"data-line":"",children:[l(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:" page.tsx"}),l(c.span,{style:{color:"#A6E3A1"},children:" -"}),l(c.span,{style:{color:"#A6E3A1"},children:" Sanskar"}),l(c.span,{style:{color:"#A6E3A1"},children:" Page"})]})]})})}),"\n",l(c.hr,{}),"\n",l(c.h1,{id:"nested-routes",children:l(c.a,{className:"subheading-anchor",href:"#nested-routes",children:"Nested Routes"})}),"\n",l(c.h2,{id:"scenario-3-creating-blog-pages",children:l(c.a,{className:"subheading-anchor",href:"#scenario-3-creating-blog-pages",children:"Scenario 3: Creating Blog Pages"})}),"\n",l(c.p,{children:"Suppose you want to handle the following routes:"}),"\n",n(c.ul,{children:["\n",l(c.li,{children:l(c.em,{children:l(c.a,{href:"http://localhost:3000/blog",target:"_blank",rel:"nofollow",children:"http://localhost:3000/blog"})})}),"\n",l(c.li,{children:l(c.em,{children:l(c.a,{href:"http://localhost:3000/blog/first",target:"_blank",rel:"nofollow",children:"http://localhost:3000/blog/first"})})}),"\n",l(c.li,{children:l(c.em,{children:l(c.a,{href:"http://localhost:3000/blog/second",target:"_blank",rel:"nofollow",children:"http://localhost:3000/blog/second"})})}),"\n"]}),"\n",l(c.h3,{id:"steps",children:l(c.a,{className:"subheading-anchor",href:"#steps",children:"Steps:"})}),"\n",n(c.ol,{children:["\n",n(c.li,{children:["First, create a ",l(c.em,{children:"blog"})," folder inside ",l(c.em,{children:"src/app"}),"."]}),"\n",n(c.li,{children:["Inside ",l(c.em,{children:"blog"}),", create a ",l(c.em,{children:"page.tsx"})," file."]}),"\n"]}),"\n",l(c.p,{children:"This will create the route:"}),"\n",l(c.p,{children:l(c.em,{children:l(c.a,{href:"http://localhost:3000/blog",target:"_blank",rel:"nofollow",children:"http://localhost:3000/blog"})})}),"\n",l(c.h4,{id:"handling-blogfirst-and-blogsecond",children:n(c.a,{className:"subheading-anchor",href:"#handling-blogfirst-and-blogsecond",children:["Handling ",l(c.em,{children:"/blog/first"})," and ",l(c.em,{children:"/blog/second"})]})}),"\n",n(c.p,{children:[l(c.strong,{children:"Brute force method"})," (Good for small projects, but not recommended for scalability):"]}),"\n",l(c.p,{children:"Manually create separate folders:"}),"\n",l(c.figure,{"data-rehype-pretty-code-figure":"",children:l(c.pre,{style:{backgroundColor:"#1e1e2e",color:"#cdd6f4"},tabIndex:"0","data-language":"sh","data-theme":"catppuccin-mocha",children:n(c.code,{"data-language":"sh","data-theme":"catppuccin-mocha",style:{display:"grid"},children:[l(c.span,{"data-line":"",children:l(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:"src/app/blog/first/page.tsx"})}),"\n",l(c.span,{"data-line":"",children:l(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:"src/app/blog/second/page.tsx"})})]})})}),"\n",l(c.p,{children:"Each file should contain:"}),"\n",l(c.figure,{"data-rehype-pretty-code-figure":"",children:l(c.pre,{style:{backgroundColor:"#1e1e2e",color:"#cdd6f4"},tabIndex:"0","data-language":"tsx","data-theme":"catppuccin-mocha",children:n(c.code,{"data-language":"tsx","data-theme":"catppuccin-mocha",style:{display:"grid"},children:[n(c.span,{"data-line":"",children:[l(c.span,{style:{color:"#CBA6F7"},children:"export"}),l(c.span,{style:{color:"#CBA6F7"},children:" default"}),l(c.span,{style:{color:"#CBA6F7"},children:" function"}),l(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:" FirstBlog"}),l(c.span,{style:{color:"#9399B2"},children:"()"}),l(c.span,{style:{color:"#9399B2"},children:" {"})]}),"\n",n(c.span,{"data-line":"",children:[l(c.span,{style:{color:"#CBA6F7"},children:" return"}),l(c.span,{style:{color:"#94E2D5"},children:" <"}),l(c.span,{style:{color:"#89B4FA"},children:"h1"}),l(c.span,{style:{color:"#94E2D5"},children:">"}),l(c.span,{style:{color:"#CDD6F4"},children:"First Blog Post"}),l(c.span,{style:{color:"#94E2D5"},children:""}),l(c.span,{style:{color:"#9399B2"},children:";"})]}),"\n",l(c.span,{"data-line":"",children:l(c.span,{style:{color:"#9399B2"},children:"}"})})]})})}),"\n",l(c.figure,{"data-rehype-pretty-code-figure":"",children:l(c.pre,{style:{backgroundColor:"#1e1e2e",color:"#cdd6f4"},tabIndex:"0","data-language":"tsx","data-theme":"catppuccin-mocha",children:n(c.code,{"data-language":"tsx","data-theme":"catppuccin-mocha",style:{display:"grid"},children:[n(c.span,{"data-line":"",children:[l(c.span,{style:{color:"#CBA6F7"},children:"export"}),l(c.span,{style:{color:"#CBA6F7"},children:" default"}),l(c.span,{style:{color:"#CBA6F7"},children:" function"}),l(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:" SecondBlog"}),l(c.span,{style:{color:"#9399B2"},children:"()"}),l(c.span,{style:{color:"#9399B2"},children:" {"})]}),"\n",n(c.span,{"data-line":"",children:[l(c.span,{style:{color:"#CBA6F7"},children:" return"}),l(c.span,{style:{color:"#94E2D5"},children:" <"}),l(c.span,{style:{color:"#89B4FA"},children:"h1"}),l(c.span,{style:{color:"#94E2D5"},children:">"}),l(c.span,{style:{color:"#CDD6F4"},children:"Second Blog Post"}),l(c.span,{style:{color:"#94E2D5"},children:""}),l(c.span,{style:{color:"#9399B2"},children:";"})]}),"\n",l(c.span,{"data-line":"",children:l(c.span,{style:{color:"#9399B2"},children:"}"})})]})})}),"\n",l(c.p,{children:l(c.img,{src:"/blog/imported/routing-in-nextjs/inline-1.png",alt:"routes"})}),"\n",l(c.hr,{}),"\n",l(c.h1,{id:"dynamic-routing",children:l(c.a,{className:"subheading-anchor",href:"#dynamic-routing",children:"Dynamic Routing"})}),"\n",l(c.h2,{id:"scenario-4-creating-a-product-listing-page",children:l(c.a,{className:"subheading-anchor",href:"#scenario-4-creating-a-product-listing-page",children:"Scenario 4: Creating a Product Listing Page"})}),"\n",l(c.p,{children:"Suppose you want to create a product listing page where:"}),"\n",n(c.ul,{children:["\n",n(c.li,{children:[l(c.em,{children:"/products"})," lists all products."]}),"\n",n(c.li,{children:["Individual product pages exist at ",l(c.em,{children:"/products/product-1"}),", ",l(c.em,{children:"/products/product-2"}),", etc."]}),"\n"]}),"\n",n(c.p,{children:["Each product also has a details page, such as ",l(c.em,{children:"/products/1"}),"."]}),"\n",l(c.h3,{id:"brute-force-method-not-scalable",children:l(c.a,{className:"subheading-anchor",href:"#brute-force-method-not-scalable",children:"Brute Force Method (Not Scalable)"})}),"\n",l(c.p,{children:"Manually create:"}),"\n",l(c.figure,{"data-rehype-pretty-code-figure":"",children:l(c.pre,{style:{backgroundColor:"#1e1e2e",color:"#cdd6f4"},tabIndex:"0","data-language":"sh","data-theme":"catppuccin-mocha",children:n(c.code,{"data-language":"sh","data-theme":"catppuccin-mocha",style:{display:"grid"},children:[l(c.span,{"data-line":"",children:l(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:"src/app/products/product-1/page.tsx"})}),"\n",l(c.span,{"data-line":"",children:l(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:"src/app/products/product-2/page.tsx"})}),"\n",l(c.span,{"data-line":"",children:l(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:"src/app/products/product-3/page.tsx"})})]})})}),"\n",l(c.h3,{id:"using-dynamic-routing-recommended-method",children:l(c.a,{className:"subheading-anchor",href:"#using-dynamic-routing-recommended-method",children:l(c.strong,{children:"Using Dynamic Routing (Recommended Method)"})})}),"\n",n(c.p,{children:["Instead of manually creating pages for each product, use ",l(c.strong,{children:"dynamic routing"}),"."]}),"\n",l(c.h4,{id:"steps-1",children:l(c.a,{className:"subheading-anchor",href:"#steps-1",children:"Steps:"})}),"\n",n(c.ol,{children:["\n",n(c.li,{children:["Create a folder named ",l(c.em,{children:"[productId]"})," inside ",l(c.em,{children:"src/app/products/"}),"."]}),"\n",n(c.li,{children:["Inside ",l(c.em,{children:"[productId]"}),", create a ",l(c.em,{children:"page.tsx"})," file."]}),"\n"]}),"\n",l(c.p,{children:"Your folder structure should look like:"}),"\n",l(c.figure,{"data-rehype-pretty-code-figure":"",children:l(c.pre,{style:{backgroundColor:"#1e1e2e",color:"#cdd6f4"},tabIndex:"0","data-language":"sh","data-theme":"catppuccin-mocha",children:n(c.code,{"data-language":"sh","data-theme":"catppuccin-mocha",style:{display:"grid"},children:[l(c.span,{"data-line":"",children:l(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:"src/app/products/"})}),"\n",n(c.span,{"data-line":"",children:[l(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:" page.tsx"}),l(c.span,{style:{color:"#6C7086",fontStyle:"italic"},children:" # Product listing page"})]}),"\n",n(c.span,{"data-line":"",children:[l(c.span,{style:{color:"#9399B2"},children:" ["}),l(c.span,{style:{color:"#CDD6F4"},children:"productId"}),l(c.span,{style:{color:"#9399B2"},children:"]"}),l(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:"/"})]}),"\n",n(c.span,{"data-line":"",children:[l(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:" page.tsx"}),l(c.span,{style:{color:"#6C7086",fontStyle:"italic"},children:" # Dynamic product page"})]})]})})}),"\n",l(c.h3,{id:"code-for-dynamic-product-page",children:l(c.a,{className:"subheading-anchor",href:"#code-for-dynamic-product-page",children:l(c.strong,{children:"Code for Dynamic Product Page"})})}),"\n",l(c.figure,{"data-rehype-pretty-code-figure":"",children:l(c.pre,{style:{backgroundColor:"#1e1e2e",color:"#cdd6f4"},tabIndex:"0","data-language":"tsx","data-theme":"catppuccin-mocha",children:n(c.code,{"data-language":"tsx","data-theme":"catppuccin-mocha",style:{display:"grid"},children:[n(c.span,{"data-line":"",children:[l(c.span,{style:{color:"#CBA6F7"},children:"export"}),l(c.span,{style:{color:"#CBA6F7"},children:" default"}),l(c.span,{style:{color:"#CBA6F7"},children:" function"}),l(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:" ProductPage"}),l(c.span,{style:{color:"#9399B2"},children:"({"})]}),"\n",n(c.span,{"data-line":"",children:[l(c.span,{style:{color:"#EBA0AC",fontStyle:"italic"},children:" params"}),l(c.span,{style:{color:"#9399B2"},children:","})]}),"\n",n(c.span,{"data-line":"",children:[l(c.span,{style:{color:"#9399B2"},children:"}"}),l(c.span,{style:{color:"#94E2D5"},children:":"}),l(c.span,{style:{color:"#9399B2"},children:" {"})]}),"\n",n(c.span,{"data-line":"",children:[l(c.span,{style:{color:"#CDD6F4",fontStyle:"italic"},children:" params"}),l(c.span,{style:{color:"#94E2D5"},children:":"}),l(c.span,{style:{color:"#9399B2"},children:" {"}),l(c.span,{style:{color:"#CDD6F4",fontStyle:"italic"},children:" productId"}),l(c.span,{style:{color:"#94E2D5"},children:":"}),l(c.span,{style:{color:"#CBA6F7"},children:" string"}),l(c.span,{style:{color:"#9399B2"},children:" };"})]}),"\n",n(c.span,{"data-line":"",children:[l(c.span,{style:{color:"#9399B2"},children:"})"}),l(c.span,{style:{color:"#9399B2"},children:" {"})]}),"\n",n(c.span,{"data-line":"",children:[l(c.span,{style:{color:"#CBA6F7"},children:" return"}),l(c.span,{style:{color:"#94E2D5"},children:" <"}),l(c.span,{style:{color:"#89B4FA"},children:"h1"}),l(c.span,{style:{color:"#94E2D5"},children:">"}),l(c.span,{style:{color:"#CDD6F4"},children:"Product ID: "}),l(c.span,{style:{color:"#9399B2"},children:"{"}),l(c.span,{style:{color:"#CDD6F4"},children:"params"}),l(c.span,{style:{color:"#94E2D5"},children:"."}),l(c.span,{style:{color:"#CDD6F4"},children:"productId"}),l(c.span,{style:{color:"#9399B2"},children:"}"}),l(c.span,{style:{color:"#94E2D5"},children:""}),l(c.span,{style:{color:"#9399B2"},children:";"})]}),"\n",l(c.span,{"data-line":"",children:l(c.span,{style:{color:"#9399B2"},children:"}"})})]})})}),"\n",n(c.p,{children:["Now, if you visit ",l(c.em,{children:l(c.a,{href:"http://localhost:3000/products/100",target:"_blank",rel:"nofollow",children:"http://localhost:3000/products/100"})}),", the ",l(c.em,{children:"params.productId"})," will be ",l(c.em,{children:"100"}),", and it will render dynamically."]}),"\n",l(c.hr,{}),"\n",l(c.h1,{id:"nested-dynamic-routes",children:l(c.a,{className:"subheading-anchor",href:"#nested-dynamic-routes",children:"Nested Dynamic Routes"})}),"\n",l(c.h2,{id:"scenario-5-category--product-pages",children:l(c.a,{className:"subheading-anchor",href:"#scenario-5-category--product-pages",children:"Scenario 5: Category & Product Pages"})}),"\n",l(c.p,{children:"Let's say you need URLs like:"}),"\n",n(c.ul,{children:["\n",l(c.li,{children:l(c.em,{children:l(c.a,{href:"http://localhost:3000/categories/electronics",target:"_blank",rel:"nofollow",children:"http://localhost:3000/categories/electronics"})})}),"\n",l(c.li,{children:l(c.em,{children:l(c.a,{href:"http://localhost:3000/categories/fashion",target:"_blank",rel:"nofollow",children:"http://localhost:3000/categories/fashion"})})}),"\n",l(c.li,{children:l(c.em,{children:l(c.a,{href:"http://localhost:3000/categories/electronics/phones",target:"_blank",rel:"nofollow",children:"http://localhost:3000/categories/electronics/phones"})})}),"\n",l(c.li,{children:l(c.em,{children:l(c.a,{href:"http://localhost:3000/categories/fashion/shoes",target:"_blank",rel:"nofollow",children:"http://localhost:3000/categories/fashion/shoes"})})}),"\n"]}),"\n",l(c.h3,{id:"steps-to-implement",children:l(c.a,{className:"subheading-anchor",href:"#steps-to-implement",children:l(c.strong,{children:"Steps to Implement:"})})}),"\n",n(c.ol,{children:["\n",n(c.li,{children:["Create a ",l(c.em,{children:"categories"})," folder inside ",l(c.em,{children:"src/app"}),"."]}),"\n",n(c.li,{children:["Inside ",l(c.em,{children:"categories"}),", create a dynamic ",l(c.em,{children:"[categoryId]"})," folder."]}),"\n",n(c.li,{children:["Inside ",l(c.em,{children:"[categoryId]"}),", create a dynamic ",l(c.em,{children:"[subCategoryId]"})," folder."]}),"\n",n(c.li,{children:["Add ",l(c.em,{children:"page.tsx"})," inside both folders."]}),"\n"]}),"\n",l(c.h4,{id:"folder-structure",children:l(c.a,{className:"subheading-anchor",href:"#folder-structure",children:l(c.strong,{children:"Folder Structure:"})})}),"\n",l(c.figure,{"data-rehype-pretty-code-figure":"",children:l(c.pre,{style:{backgroundColor:"#1e1e2e",color:"#cdd6f4"},tabIndex:"0","data-language":"sh","data-theme":"catppuccin-mocha",children:n(c.code,{"data-language":"sh","data-theme":"catppuccin-mocha",style:{display:"grid"},children:[l(c.span,{"data-line":"",children:l(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:"src/app/categories/"})}),"\n",n(c.span,{"data-line":"",children:[l(c.span,{style:{color:"#9399B2"},children:" ["}),l(c.span,{style:{color:"#CDD6F4"},children:"categoryId"}),l(c.span,{style:{color:"#9399B2"},children:"]"}),l(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:"/"})]}),"\n",n(c.span,{"data-line":"",children:[l(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:" page.tsx"}),l(c.span,{style:{color:"#6C7086",fontStyle:"italic"},children:" # Category page"})]}),"\n",n(c.span,{"data-line":"",children:[l(c.span,{style:{color:"#9399B2"},children:" ["}),l(c.span,{style:{color:"#CDD6F4"},children:"subCategoryId"}),l(c.span,{style:{color:"#9399B2"},children:"]"}),l(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:"/"})]}),"\n",n(c.span,{"data-line":"",children:[l(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:" page.tsx"}),l(c.span,{style:{color:"#6C7086",fontStyle:"italic"},children:" # Sub-category page"})]})]})})}),"\n",l(c.h4,{id:"code-for-category-page",children:l(c.a,{className:"subheading-anchor",href:"#code-for-category-page",children:l(c.strong,{children:"Code for Category Page:"})})}),"\n",l(c.figure,{"data-rehype-pretty-code-figure":"",children:l(c.pre,{style:{backgroundColor:"#1e1e2e",color:"#cdd6f4"},tabIndex:"0","data-language":"tsx","data-theme":"catppuccin-mocha",children:n(c.code,{"data-language":"tsx","data-theme":"catppuccin-mocha",style:{display:"grid"},children:[n(c.span,{"data-line":"",children:[l(c.span,{style:{color:"#CBA6F7"},children:"export"}),l(c.span,{style:{color:"#CBA6F7"},children:" default"}),l(c.span,{style:{color:"#CBA6F7"},children:" function"}),l(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:" CategoryPage"}),l(c.span,{style:{color:"#9399B2"},children:"({"})]}),"\n",n(c.span,{"data-line":"",children:[l(c.span,{style:{color:"#EBA0AC",fontStyle:"italic"},children:" params"}),l(c.span,{style:{color:"#9399B2"},children:","})]}),"\n",n(c.span,{"data-line":"",children:[l(c.span,{style:{color:"#9399B2"},children:"}"}),l(c.span,{style:{color:"#94E2D5"},children:":"}),l(c.span,{style:{color:"#9399B2"},children:" {"})]}),"\n",n(c.span,{"data-line":"",children:[l(c.span,{style:{color:"#CDD6F4",fontStyle:"italic"},children:" params"}),l(c.span,{style:{color:"#94E2D5"},children:":"}),l(c.span,{style:{color:"#9399B2"},children:" {"}),l(c.span,{style:{color:"#CDD6F4",fontStyle:"italic"},children:" categoryId"}),l(c.span,{style:{color:"#94E2D5"},children:":"}),l(c.span,{style:{color:"#CBA6F7"},children:" string"}),l(c.span,{style:{color:"#9399B2"},children:" };"})]}),"\n",n(c.span,{"data-line":"",children:[l(c.span,{style:{color:"#9399B2"},children:"})"}),l(c.span,{style:{color:"#9399B2"},children:" {"})]}),"\n",n(c.span,{"data-line":"",children:[l(c.span,{style:{color:"#CBA6F7"},children:" return"}),l(c.span,{style:{color:"#94E2D5"},children:" <"}),l(c.span,{style:{color:"#89B4FA"},children:"h1"}),l(c.span,{style:{color:"#94E2D5"},children:">"}),l(c.span,{style:{color:"#CDD6F4"},children:"Category: "}),l(c.span,{style:{color:"#9399B2"},children:"{"}),l(c.span,{style:{color:"#CDD6F4"},children:"params"}),l(c.span,{style:{color:"#94E2D5"},children:"."}),l(c.span,{style:{color:"#CDD6F4"},children:"categoryId"}),l(c.span,{style:{color:"#9399B2"},children:"}"}),l(c.span,{style:{color:"#94E2D5"},children:""}),l(c.span,{style:{color:"#9399B2"},children:";"})]}),"\n",l(c.span,{"data-line":"",children:l(c.span,{style:{color:"#9399B2"},children:"}"})})]})})}),"\n",l(c.h4,{id:"code-for-sub-category-page",children:l(c.a,{className:"subheading-anchor",href:"#code-for-sub-category-page",children:l(c.strong,{children:"Code for Sub-Category Page:"})})}),"\n",l(c.figure,{"data-rehype-pretty-code-figure":"",children:l(c.pre,{style:{backgroundColor:"#1e1e2e",color:"#cdd6f4"},tabIndex:"0","data-language":"tsx","data-theme":"catppuccin-mocha",children:n(c.code,{"data-language":"tsx","data-theme":"catppuccin-mocha",style:{display:"grid"},children:[n(c.span,{"data-line":"",children:[l(c.span,{style:{color:"#CBA6F7"},children:"export"}),l(c.span,{style:{color:"#CBA6F7"},children:" default"}),l(c.span,{style:{color:"#CBA6F7"},children:" function"}),l(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:" SubCategoryPage"}),l(c.span,{style:{color:"#9399B2"},children:"({"})]}),"\n",n(c.span,{"data-line":"",children:[l(c.span,{style:{color:"#EBA0AC",fontStyle:"italic"},children:" params"}),l(c.span,{style:{color:"#9399B2"},children:","})]}),"\n",n(c.span,{"data-line":"",children:[l(c.span,{style:{color:"#9399B2"},children:"}"}),l(c.span,{style:{color:"#94E2D5"},children:":"}),l(c.span,{style:{color:"#9399B2"},children:" {"})]}),"\n",n(c.span,{"data-line":"",children:[l(c.span,{style:{color:"#CDD6F4",fontStyle:"italic"},children:" params"}),l(c.span,{style:{color:"#94E2D5"},children:":"}),l(c.span,{style:{color:"#9399B2"},children:" {"}),l(c.span,{style:{color:"#CDD6F4",fontStyle:"italic"},children:" categoryId"}),l(c.span,{style:{color:"#94E2D5"},children:":"}),l(c.span,{style:{color:"#CBA6F7"},children:" string"}),l(c.span,{style:{color:"#9399B2"},children:";"}),l(c.span,{style:{color:"#CDD6F4",fontStyle:"italic"},children:" subCategoryId"}),l(c.span,{style:{color:"#94E2D5"},children:":"}),l(c.span,{style:{color:"#CBA6F7"},children:" string"}),l(c.span,{style:{color:"#9399B2"},children:" };"})]}),"\n",n(c.span,{"data-line":"",children:[l(c.span,{style:{color:"#9399B2"},children:"})"}),l(c.span,{style:{color:"#9399B2"},children:" {"})]}),"\n",n(c.span,{"data-line":"",children:[l(c.span,{style:{color:"#CBA6F7"},children:" return"}),l(c.span,{style:{color:"#CDD6F4"},children:" ("})]}),"\n",n(c.span,{"data-line":"",children:[l(c.span,{style:{color:"#94E2D5"},children:" <"}),l(c.span,{style:{color:"#89B4FA"},children:"h1"}),l(c.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",n(c.span,{"data-line":"",children:[l(c.span,{style:{color:"#9399B2"},children:" {"}),l(c.span,{style:{color:"#CDD6F4"},children:"params"}),l(c.span,{style:{color:"#94E2D5"},children:"."}),l(c.span,{style:{color:"#CDD6F4"},children:"subCategoryId"}),l(c.span,{style:{color:"#9399B2"},children:"}"}),l(c.span,{style:{color:"#CDD6F4"},children:" in "}),l(c.span,{style:{color:"#9399B2"},children:"{"}),l(c.span,{style:{color:"#CDD6F4"},children:"params"}),l(c.span,{style:{color:"#94E2D5"},children:"."}),l(c.span,{style:{color:"#CDD6F4"},children:"categoryId"}),l(c.span,{style:{color:"#9399B2"},children:"}"})]}),"\n",n(c.span,{"data-line":"",children:[l(c.span,{style:{color:"#94E2D5"},children:" "})]}),"\n",n(c.span,{"data-line":"",children:[l(c.span,{style:{color:"#CDD6F4"},children:" )"}),l(c.span,{style:{color:"#9399B2"},children:";"})]}),"\n",l(c.span,{"data-line":"",children:l(c.span,{style:{color:"#9399B2"},children:"}"})})]})})}),"\n",l(c.hr,{}),"\n",l(c.h1,{id:"catch-all-segments",children:l(c.a,{className:"subheading-anchor",href:"#catch-all-segments",children:"Catch-All Segments"})}),"\n",l(c.h2,{id:"scenario-6-handling-unknown-nested-routes",children:l(c.a,{className:"subheading-anchor",href:"#scenario-6-handling-unknown-nested-routes",children:"Scenario 6: Handling Unknown Nested Routes"})}),"\n",n(c.p,{children:["If you need to handle ",l(c.strong,{children:"any level of nested paths"}),", use a ",l(c.strong,{children:"catch-all segment"}),"."]}),"\n",l(c.h3,{id:"example-urls",children:l(c.a,{className:"subheading-anchor",href:"#example-urls",children:l(c.strong,{children:"Example URLs:"})})}),"\n",n(c.ul,{children:["\n",l(c.li,{children:l(c.em,{children:l(c.a,{href:"http://localhost:3000/docs",target:"_blank",rel:"nofollow",children:"http://localhost:3000/docs"})})}),"\n",l(c.li,{children:l(c.em,{children:l(c.a,{href:"http://localhost:3000/docs/getting-started",target:"_blank",rel:"nofollow",children:"http://localhost:3000/docs/getting-started"})})}),"\n",l(c.li,{children:l(c.em,{children:l(c.a,{href:"http://localhost:3000/docs/api/reference",target:"_blank",rel:"nofollow",children:"http://localhost:3000/docs/api/reference"})})}),"\n"]}),"\n",l(c.h3,{id:"how-to-implement",children:l(c.a,{className:"subheading-anchor",href:"#how-to-implement",children:l(c.strong,{children:"How to Implement:"})})}),"\n",n(c.ol,{children:["\n",n(c.li,{children:["Inside ",l(c.em,{children:"src/app"}),", create a ",l(c.em,{children:"docs"})," folder."]}),"\n",n(c.li,{children:["Inside ",l(c.em,{children:"docs"}),", create a ",l(c.em,{children:"[...slug]"}),' folder (the three dots indicate "catch-all").']}),"\n",n(c.li,{children:["Inside ",l(c.em,{children:"[...slug]"}),", create ",l(c.em,{children:"page.tsx"}),"."]}),"\n"]}),"\n",l(c.h4,{id:"folder-structure-1",children:l(c.a,{className:"subheading-anchor",href:"#folder-structure-1",children:l(c.strong,{children:"Folder Structure:"})})}),"\n",l(c.figure,{"data-rehype-pretty-code-figure":"",children:l(c.pre,{style:{backgroundColor:"#1e1e2e",color:"#cdd6f4"},tabIndex:"0","data-language":"sh","data-theme":"catppuccin-mocha",children:n(c.code,{"data-language":"sh","data-theme":"catppuccin-mocha",style:{display:"grid"},children:[l(c.span,{"data-line":"",children:l(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:"src/app/docs/"})}),"\n",n(c.span,{"data-line":"",children:[l(c.span,{style:{color:"#9399B2"},children:" ["}),l(c.span,{style:{color:"#CDD6F4"},children:"...slug"}),l(c.span,{style:{color:"#9399B2"},children:"]"}),l(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:"/"})]}),"\n",l(c.span,{"data-line":"",children:l(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:" page.tsx"})})]})})}),"\n",l(c.h4,{id:"code-for-catch-all-route",children:l(c.a,{className:"subheading-anchor",href:"#code-for-catch-all-route",children:l(c.strong,{children:"Code for Catch-All Route:"})})}),"\n",l(c.figure,{"data-rehype-pretty-code-figure":"",children:l(c.pre,{style:{backgroundColor:"#1e1e2e",color:"#cdd6f4"},tabIndex:"0","data-language":"tsx","data-theme":"catppuccin-mocha",children:n(c.code,{"data-language":"tsx","data-theme":"catppuccin-mocha",style:{display:"grid"},children:[n(c.span,{"data-line":"",children:[l(c.span,{style:{color:"#CBA6F7"},children:"export"}),l(c.span,{style:{color:"#CBA6F7"},children:" default"}),l(c.span,{style:{color:"#CBA6F7"},children:" function"}),l(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:" DocsPage"}),l(c.span,{style:{color:"#9399B2"},children:"({"}),l(c.span,{style:{color:"#EBA0AC",fontStyle:"italic"},children:" params"}),l(c.span,{style:{color:"#9399B2"},children:" }"}),l(c.span,{style:{color:"#94E2D5"},children:":"}),l(c.span,{style:{color:"#9399B2"},children:" {"}),l(c.span,{style:{color:"#CDD6F4",fontStyle:"italic"},children:" params"}),l(c.span,{style:{color:"#94E2D5"},children:":"}),l(c.span,{style:{color:"#9399B2"},children:" {"}),l(c.span,{style:{color:"#CDD6F4",fontStyle:"italic"},children:" slug"}),l(c.span,{style:{color:"#94E2D5"},children:"?:"}),l(c.span,{style:{color:"#CBA6F7"},children:" string"}),l(c.span,{style:{color:"#F9E2AF",fontStyle:"italic"},children:"[] "}),l(c.span,{style:{color:"#9399B2"},children:"}"}),l(c.span,{style:{color:"#9399B2"},children:" })"}),l(c.span,{style:{color:"#9399B2"},children:" {"})]}),"\n",n(c.span,{"data-line":"",children:[l(c.span,{style:{color:"#CBA6F7"},children:" return"}),l(c.span,{style:{color:"#CDD6F4"},children:" ("})]}),"\n",n(c.span,{"data-line":"",children:[l(c.span,{style:{color:"#94E2D5"},children:" <"}),l(c.span,{style:{color:"#89B4FA"},children:"div"}),l(c.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",n(c.span,{"data-line":"",children:[l(c.span,{style:{color:"#94E2D5"},children:" <"}),l(c.span,{style:{color:"#89B4FA"},children:"h1"}),l(c.span,{style:{color:"#94E2D5"},children:">"}),l(c.span,{style:{color:"#CDD6F4"},children:"Docs Page"}),l(c.span,{style:{color:"#94E2D5"},children:""})]}),"\n",n(c.span,{"data-line":"",children:[l(c.span,{style:{color:"#94E2D5"},children:" <"}),l(c.span,{style:{color:"#89B4FA"},children:"p"}),l(c.span,{style:{color:"#94E2D5"},children:">"}),l(c.span,{style:{color:"#CDD6F4"},children:"Path: "}),l(c.span,{style:{color:"#9399B2"},children:"{"}),l(c.span,{style:{color:"#CDD6F4"},children:"params"}),l(c.span,{style:{color:"#94E2D5"},children:"."}),l(c.span,{style:{color:"#CDD6F4"},children:"slug "}),l(c.span,{style:{color:"#94E2D5"},children:"?"}),l(c.span,{style:{color:"#CDD6F4"},children:" params"}),l(c.span,{style:{color:"#94E2D5"},children:"."}),l(c.span,{style:{color:"#CDD6F4"},children:"slug"}),l(c.span,{style:{color:"#94E2D5"},children:"."}),l(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:"join"}),l(c.span,{style:{color:"#CDD6F4"},children:"("}),l(c.span,{style:{color:"#A6E3A1"},children:"' / '"}),l(c.span,{style:{color:"#CDD6F4"},children:") "}),l(c.span,{style:{color:"#94E2D5"},children:":"}),l(c.span,{style:{color:"#A6E3A1"},children:" 'Home'"}),l(c.span,{style:{color:"#9399B2"},children:"}"}),l(c.span,{style:{color:"#94E2D5"},children:""})]}),"\n",n(c.span,{"data-line":"",children:[l(c.span,{style:{color:"#94E2D5"},children:" "})]}),"\n",n(c.span,{"data-line":"",children:[l(c.span,{style:{color:"#CDD6F4"},children:" )"}),l(c.span,{style:{color:"#9399B2"},children:";"})]}),"\n",l(c.span,{"data-line":"",children:l(c.span,{style:{color:"#9399B2"},children:"}"})})]})})})]})}return{default:function(e={}){const{wrapper:n}=e.components||{};return n?l(n,{...e,children:l(_createMdxContent,{...e})}):_createMdxContent(e)}};

Dynamic routing

Routing in Next.js (App Router) - A Complete Guide (2025)