{"id":6300,"date":"2026-02-13T11:06:17","date_gmt":"2026-02-13T11:06:17","guid":{"rendered":"https:\/\/kanhasoft.com\/blog\/?p=6300"},"modified":"2026-02-13T11:06:17","modified_gmt":"2026-02-13T11:06:17","slug":"how-do-we-implement-dynamic-routes-using-the-next-js-app-router","status":"publish","type":"post","link":"https:\/\/kanhasoft.com\/blog\/how-do-we-implement-dynamic-routes-using-the-next-js-app-router\/","title":{"rendered":"How Do We Implement Dynamic Routes Using the Next.js App Router?"},"content":{"rendered":"<p data-start=\"69\" data-end=\"299\">Dynamic routes are one of those<a href=\"https:\/\/kanhasoft.com\/nextjs-development-company.html\"> Next.js<\/a> things that feel obvious right up until we\u2019re staring at an <code data-start=\"172\" data-end=\"178\">app\/<\/code> folder at 1:17 AM thinking, \u201cWhy is <code data-start=\"215\" data-end=\"223\">[slug]<\/code> not slugging?\u201d (Yes, we\u2019ve been there. No, we didn\u2019t handle it with grace.<\/p>\n<p data-start=\"301\" data-end=\"491\">If you\u2019re using the Next.js App Router, dynamic routing is clean, powerful, and surprisingly flexible\u2014once we learn the rules of the filesystem game. In this guide, we\u2019ll walk through:<\/p>\n<ul>\n<li data-start=\"495\" data-end=\"540\">How dynamic segments work in the App Router<\/li>\n<li data-start=\"543\" data-end=\"577\">Single dynamic routes (<code data-start=\"566\" data-end=\"574\">[slug]<\/code>)<\/li>\n<li data-start=\"580\" data-end=\"651\">Catch-all routes (<code data-start=\"598\" data-end=\"609\">[...slug]<\/code>) and optional catch-all (<code data-start=\"635\" data-end=\"648\">[[...slug]]<\/code>)<\/li>\n<li data-start=\"654\" data-end=\"732\">Reading <code data-start=\"662\" data-end=\"670\">params<\/code> in Server Components and <code data-start=\"696\" data-end=\"709\">useParams()<\/code> in Client Components<\/li>\n<li data-start=\"735\" data-end=\"780\">Pre-rendering with <code data-start=\"754\" data-end=\"778\">generateStaticParams()<\/code><\/li>\n<li data-start=\"783\" data-end=\"822\">Dynamic SEO with <code data-start=\"800\" data-end=\"820\">generateMetadata()<\/code><\/li>\n<li data-start=\"825\" data-end=\"886\">Bonus: dynamic routes in Route Handlers (<code data-start=\"866\" data-end=\"876\">route.ts<\/code>) for APIs<\/li>\n<\/ul>\n<p data-start=\"888\" data-end=\"1107\">We\u2019ll keep it practical, slightly whimsical, and very \u201cwe\u2019ve shipped this in production\u201d (because we have)\u2014especially for<a href=\"https:\/\/kanhasoft.com\/cloud-saas-based-application-development.html\"> teams building SaaS apps<\/a> and dashboards across the <strong data-start=\"1061\" data-end=\"1106\">USA, UK, Israel, Switzerland, and the UAE<\/strong>.<\/p>\n<h2 data-start=\"1114\" data-end=\"1167\">What Is a Dynamic Route in the Next.js App Router?<\/h2>\n<p data-start=\"1169\" data-end=\"1311\">In the App Router, <strong data-start=\"1188\" data-end=\"1221\">routes are created by folders<\/strong>, not by configuration. To make a route dynamic, we wrap a folder name in square brackets:<\/p>\n<ul data-start=\"1313\" data-end=\"1401\">\n<li data-start=\"1313\" data-end=\"1401\">\n<p data-start=\"1315\" data-end=\"1401\"><code data-start=\"1315\" data-end=\"1341\">app\/blog\/[slug]\/page.tsx<\/code> \u2192 matches <code data-start=\"1352\" data-end=\"1371\">\/blog\/hello-world<\/code>, <code data-start=\"1373\" data-end=\"1395\">\/blog\/nextjs-routing<\/code>, etc.<\/p>\n<\/li>\n<\/ul>\n<p data-start=\"1403\" data-end=\"1532\">This is the official convention: wrap the segment name in <code data-start=\"1461\" data-end=\"1465\">[]<\/code> to create a dynamic segment.<a href=\"https:\/\/kanhasoft.com\/schedule-a-meeting.html\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kanhasoft.com\/blog\/wp-content\/uploads\/2026\/02\/Unlock-the-Power-of-Next.js-App-Router.png\" alt=\"Unlock the Power of Next.js App Router\" width=\"1000\" height=\"250\" class=\"aligncenter size-full wp-image-6305\" srcset=\"https:\/\/kanhasoft.com\/blog\/wp-content\/uploads\/2026\/02\/Unlock-the-Power-of-Next.js-App-Router.png 1000w, https:\/\/kanhasoft.com\/blog\/wp-content\/uploads\/2026\/02\/Unlock-the-Power-of-Next.js-App-Router-300x75.png 300w, https:\/\/kanhasoft.com\/blog\/wp-content\/uploads\/2026\/02\/Unlock-the-Power-of-Next.js-App-Router-768x192.png 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/a><\/p>\n<h2 data-start=\"1539\" data-end=\"1592\">1) Basic Dynamic Route: <code data-start=\"1566\" data-end=\"1592\">app\/blog\/[slug]\/page.tsx<\/code><\/h2>\n<p data-start=\"1594\" data-end=\"1632\">Let\u2019s build a classic blog post route:<\/p>\n<p data-start=\"1634\" data-end=\"1654\"><strong data-start=\"1634\" data-end=\"1654\">Folder structure<\/strong><\/p>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-plain\" data-lang=\"Plain Text\"><code>app\/\r\nblog\/\r\n[slug]\/\r\npage.tsx\r\n<\/code><\/pre>\n<\/div>\n<p data-start=\"1634\" data-end=\"1654\"><code data-start=\"1709\" data-end=\"1719\">page.tsx<\/code> (Server Component by default)<\/p>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>\/\/ app\/blog\/[slug]\/page.tsx\r\ntype PageProps = {\r\nparams: { slug: string }\r\n}\r\nexport default async function BlogPostPage({ params }: PageProps) {\r\n\/\/ In real life: fetch from DB\/CMS using params.slug\r\nreturn (\r\n&lt;main&gt;\r\n&lt;h1&gt;Blog Post: {params.slug}&lt;\/h1&gt;\r\n&lt;p&gt;(Yes, that slug is coming from the URL. The internet is magic.)&lt;\/p&gt;\r\n&lt;\/main&gt;\r\n)\r\n}<\/code><\/pre>\n<\/div>\n<h3 data-start=\"2121\" data-end=\"2155\">Where does <code data-start=\"2136\" data-end=\"2144\">params<\/code> come from?<\/h3>\n<p data-start=\"2156\" data-end=\"2382\"><a href=\"https:\/\/kanhasoft.com\/nextjs-development-company.html\">Next.js<\/a> injects <code data-start=\"2172\" data-end=\"2180\">params<\/code> into your page based on the dynamic segment name. This is part of the App Router\u2019s \u201cDynamic APIs\u201d concept\u2014<code data-start=\"2287\" data-end=\"2295\">params<\/code> and <code data-start=\"2300\" data-end=\"2314\">searchParams<\/code> are first-class route inputs. <span class=\"\" data-state=\"closed\"><\/span><\/p>\n<blockquote data-start=\"2384\" data-end=\"2647\">\n<p data-start=\"2386\" data-end=\"2647\">Small but important 2026-ish note: <a href=\"https:\/\/kanhasoft.com\/nextjs-development-company.html\">Next.js<\/a> has been moving some \u201cdynamic APIs\u201d toward async behavior (depending on version and usage). If you see warnings around sync usage, check the Next.js message docs and upgrade notes.<\/p>\n<\/blockquote>\n<h2 data-start=\"2654\" data-end=\"2722\">2) Reading Dynamic Params in Client Components with <code data-start=\"2709\" data-end=\"2722\">useParams()<\/code><\/h2>\n<p data-start=\"2724\" data-end=\"2883\">Sometimes we need the slug <strong data-start=\"2751\" data-end=\"2768\">on the client<\/strong> (e.g., for UI state, analytics, client-side interactions). In that case, use <code data-start=\"2846\" data-end=\"2859\">useParams()<\/code> from <code data-start=\"2865\" data-end=\"2882\">next\/navigation<\/code>.<\/p>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-ts\" data-lang=\"TypeScript\"><code>'use client'\r\n\r\nimport { useParams } from 'next\/navigation'\r\n\r\nexport default function ClientWidget() {\r\nconst params = useParams&lt;{ slug: string }&gt;()\r\nreturn &lt;div&gt;Client saw slug: {params.slug}&lt;\/div&gt;\r\n}<\/code><\/pre>\n<\/div>\n<p data-start=\"2724\" data-end=\"2883\"><code data-start=\"3097\" data-end=\"3110\">useParams()<\/code> is specifically a <strong data-start=\"3129\" data-end=\"3154\">Client Component hook<\/strong> for reading dynamic params.<\/p>\n<h2 data-start=\"3227\" data-end=\"3270\">3) Catch-All Dynamic Routes: <code data-start=\"3259\" data-end=\"3270\">[...slug]<\/code><\/h2>\n<p data-start=\"3272\" data-end=\"3322\">Catch-all routes match <strong data-start=\"3295\" data-end=\"3321\">multiple path segments<\/strong>.<\/p>\n<p data-start=\"3324\" data-end=\"3335\"><strong data-start=\"3324\" data-end=\"3335\">Example<\/strong><\/p>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-plain\" data-lang=\"Plain Text\"><code>app\/docs\/[...slug]\/page.tsx<\/code><\/pre>\n<\/div>\n<p data-start=\"3376\" data-end=\"3389\">This matches:<\/p>\n<ul>\n<li data-start=\"3392\" data-end=\"3415\"><code data-start=\"3392\" data-end=\"3415\">\/docs\/getting-started<\/code><\/li>\n<li data-start=\"3418\" data-end=\"3451\"><code data-start=\"3418\" data-end=\"3451\">\/docs\/app-router\/dynamic-routes<\/code><\/li>\n<li data-start=\"3454\" data-end=\"3467\"><code data-start=\"3454\" data-end=\"3467\">\/docs\/a\/b\/c<\/code><\/li>\n<\/ul>\n<p data-start=\"3469\" data-end=\"3567\">In App Router terminology, these are <strong data-start=\"3506\" data-end=\"3528\">Catch-all Segments<\/strong>. <span class=\"\" data-state=\"closed\"><\/span><\/p>\n<p data-start=\"3569\" data-end=\"3587\"><strong data-start=\"3569\" data-end=\"3587\">Implementation<\/strong><\/p>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-ts\" data-lang=\"TypeScript\"><code>\/\/ app\/docs\/[...slug]\/page.tsx\r\ntype Props = {\r\n params: { slug: string[] }\r\n}\r\n\r\nexport default function DocsPage({ params }: Props) {\r\nconst path = params.slug.join('\/')\r\nreturn (\r\n&lt;main&gt;\r\n&lt;h1&gt;Docs Path&lt;\/h1&gt;\r\n&lt;p&gt;Requested: \/docs\/{path}&lt;\/p&gt;\r\n&lt;\/main&gt;\r\n)\r\n}<\/code><\/pre>\n<\/div>\n<h2 data-start=\"3876\" data-end=\"3922\">4) Optional Catch-All Routes: <code data-start=\"3909\" data-end=\"3922\">[[...slug]]<\/code><\/h2>\n<p data-start=\"3924\" data-end=\"4015\">Optional catch-all routes are like catch-all routes, except they also match the base route.<\/p>\n<p data-start=\"4017\" data-end=\"4028\"><strong data-start=\"4017\" data-end=\"4028\">Example<\/strong><\/p>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-plain\" data-lang=\"Plain Text\"><code>app\/shop\/[[...slug]]\/page.tsx<\/code><\/pre>\n<\/div>\n<p data-start=\"4071\" data-end=\"4079\">Matches:<\/p>\n<ul>\n<li data-start=\"4082\" data-end=\"4089\"><code data-start=\"4082\" data-end=\"4089\">\/shop<\/code><\/li>\n<li data-start=\"4092\" data-end=\"4107\"><code data-start=\"4092\" data-end=\"4107\">\/shop\/clothes<\/code><\/li>\n<li data-start=\"4110\" data-end=\"4130\"><code data-start=\"4110\" data-end=\"4130\">\/shop\/clothes\/tops<\/code><\/li>\n<\/ul>\n<p data-start=\"4132\" data-end=\"4241\">This is exactly what<a href=\"https:\/\/kanhasoft.com\/nextjs-development-company.html\"> Next.js<\/a> describes for optional catch-all segments. <span class=\"\" data-state=\"closed\"><\/span><\/p>\n<p data-start=\"4243\" data-end=\"4261\"><strong data-start=\"4243\" data-end=\"4261\">Implementation<\/strong><\/p>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-ts\" data-lang=\"TypeScript\"><code>\/\/ app\/shop\/[[...slug]]\/page.tsx\r\ntype Props = {\r\nparams: { slug?: string[] }\r\n}\r\n\r\nexport default function ShopPage({ params }: Props) {\r\nconst slug = params.slug ?? []\r\nreturn (\r\n&lt;main&gt;\r\n&lt;h1&gt;Shop&lt;\/h1&gt;\r\n&lt;p&gt;Category path: {slug.length ? slug.join('\/') : '(root)'}&lt;\/p&gt;\r\n&lt;\/main&gt;\r\n)\r\n}<\/code><\/pre>\n<\/div>\n<h2 data-start=\"4577\" data-end=\"4638\"><a href=\"https:\/\/kanhasoft.com\/contact-us.html\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kanhasoft.com\/blog\/wp-content\/uploads\/2026\/02\/Work-Smarter-Not-Harder-with-Kanhasoft-1.png\" alt=\"Work Smarter Not Harder with Kanhasoft\" width=\"1000\" height=\"250\" class=\"aligncenter size-full wp-image-6306\" srcset=\"https:\/\/kanhasoft.com\/blog\/wp-content\/uploads\/2026\/02\/Work-Smarter-Not-Harder-with-Kanhasoft-1.png 1000w, https:\/\/kanhasoft.com\/blog\/wp-content\/uploads\/2026\/02\/Work-Smarter-Not-Harder-with-Kanhasoft-1-300x75.png 300w, https:\/\/kanhasoft.com\/blog\/wp-content\/uploads\/2026\/02\/Work-Smarter-Not-Harder-with-Kanhasoft-1-768x192.png 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/a>5) Pre-render Dynamic Routes with <code data-start=\"4614\" data-end=\"4638\">generateStaticParams()<\/code><\/h2>\n<p data-start=\"4640\" data-end=\"4808\">If your dynamic routes are known ahead of time (blog slugs, product IDs, docs pages), you can <strong data-start=\"4734\" data-end=\"4757\">statically generate<\/strong> them at build time using <code data-start=\"4783\" data-end=\"4807\">generateStaticParams()<\/code>.<\/p>\n<p data-start=\"4810\" data-end=\"4943\"><a href=\"https:\/\/kanhasoft.com\/nextjs-development-company.html\">Next.js<\/a> explicitly supports <code data-start=\"4838\" data-end=\"4860\">generateStaticParams<\/code> for pages, layouts, and even route handlers. <span class=\"\" data-state=\"closed\"><\/span><\/p>\n<p data-start=\"4945\" data-end=\"4956\"><strong data-start=\"4945\" data-end=\"4956\">Example<\/strong><\/p>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-ts\" data-lang=\"TypeScript\"><code>\/\/ app\/blog\/[slug]\/page.tsx\r\nexport async function generateStaticParams() {\r\n\/\/ Pretend these came from a CMS\r\nreturn [\r\n{ slug: 'hello-world' },\r\n{ slug: 'nextjs-app-router' },\r\n{ slug: 'dynamic-routes-that-finally-make-sense' },\r\n]\r\n}\r\n\r\nexport default function Page({ params }: { params: { slug: string } }) {\r\nreturn &lt;h1&gt;{params.slug}&lt;\/h1&gt;\r\n}<\/code><\/pre>\n<\/div>\n<h3 data-start=\"5324\" data-end=\"5350\">When should we use it?<\/h3>\n<p data-start=\"5351\" data-end=\"5385\">Use <code data-start=\"5355\" data-end=\"5379\">generateStaticParams()<\/code> when:<\/p>\n<ul>\n<li data-start=\"5388\" data-end=\"5424\">you have a finite set of known pages<\/li>\n<li data-start=\"5427\" data-end=\"5472\">you want fast load times and caching benefits<\/li>\n<li data-start=\"5475\" data-end=\"5510\">content doesn\u2019t change every minute<\/li>\n<\/ul>\n<p data-start=\"5512\" data-end=\"5644\">If data changes frequently, you may prefer on-demand rendering or caching strategies (that\u2019s a whole other rabbit hole\u2014with snacks).<\/p>\n<h2 data-start=\"5651\" data-end=\"5705\">6) SEO for Dynamic Routes with <code data-start=\"5685\" data-end=\"5705\">generateMetadata()<\/code><\/h2>\n<p data-start=\"5707\" data-end=\"5828\">Dynamic routes usually need dynamic titles, descriptions, Open Graph tags, etc. That\u2019s where <code data-start=\"5800\" data-end=\"5820\">generateMetadata()<\/code> shines.<\/p>\n<p data-start=\"5830\" data-end=\"5963\"><a href=\"https:\/\/kanhasoft.com\/blog\/how-to-optimize-full%e2%80%91stack-applications-using-next-js-and-nest-js\/\">Next.js recommends<\/a> <code data-start=\"5849\" data-end=\"5869\">generateMetadata()<\/code> when metadata depends on route params or external data. <span class=\"\" data-state=\"closed\"><\/span><\/p>\n<p data-start=\"5965\" data-end=\"5976\"><strong data-start=\"5965\" data-end=\"5976\">Example<\/strong><\/p>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-ts\" data-lang=\"TypeScript\"><code>\/\/ app\/blog\/[slug]\/page.tsx\r\nimport type { Metadata } from 'next'\r\n\r\nexport async function generateMetadata(\r\n{ params }: { params: { slug: string } }\r\n): Promise&lt;Metadata&gt; {\r\nconst title = params.slug.replace(\/-\/g, ' ')\r\nreturn {\r\ntitle: `${title} | Kanhasoft`,\r\ndescription: `Read about ${title} and how we build scalable apps for teams in the USA, UK, Israel, Switzerland, and the UAE.`,\r\n}\r\n}<\/code><\/pre>\n<\/div>\n<h2 data-start=\"6396\" data-end=\"6452\">7) Dynamic Routes in Route Handlers (API): <code data-start=\"6442\" data-end=\"6452\">route.ts<\/code><\/h2>\n<p data-start=\"6454\" data-end=\"6624\">If you\u2019re <a href=\"https:\/\/nextjs.org\/docs\/app\" target=\"_blank\" rel=\"noopener\">using the App Router<\/a>, <strong data-start=\"6486\" data-end=\"6504\">Route Handlers<\/strong> are the \u201cAPI routes, but App Router style.\u201d They\u2019re only available inside <code data-start=\"6579\" data-end=\"6585\">app\/<\/code>. <span class=\"\" data-state=\"closed\"><\/span><\/p>\n<p data-start=\"6626\" data-end=\"6647\"><strong data-start=\"6626\" data-end=\"6647\">Example structure<\/strong><\/p>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-plain\" data-lang=\"Plain Text\"><code>app\/api\/posts\/[id]\/route.ts<\/code><\/pre>\n<\/div>\n<p data-start=\"6626\" data-end=\"6647\"><strong>Implementation<\/strong><\/p>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-ts\" data-lang=\"TypeScript\"><code>\/\/ app\/api\/posts\/[id]\/route.ts\r\nexport async function GET(\r\nrequest: Request,\r\n{ params }: { params: { id: string } }\r\n) {\r\nreturn Response.json({ postId: params.id })\r\n}\r\n<\/code><\/pre>\n<\/div>\n<p data-start=\"6889\" data-end=\"6990\">Route handlers support standard HTTP methods like GET\/POST\/etc. <span class=\"\" data-state=\"closed\"><\/span><\/p>\n<p data-start=\"6992\" data-end=\"7217\">Also worth knowing: caching behavior for GET Route Handlers has changed across versions (especially around Next 15 defaults), so treat caching as a deliberate choice, not an assumption.<\/p>\n<h2 data-start=\"7224\" data-end=\"7296\">Common \u201cWait, Why Isn\u2019t This Working?\u201d Mistakes (We\u2019ve Made Them Too)<\/h2>\n<p data-start=\"7298\" data-end=\"7343\"><strong>1) Putting <code data-start=\"7313\" data-end=\"7323\">page.tsx<\/code> in the wrong folder<\/strong><\/p>\n<p data-start=\"7344\" data-end=\"7414\"><code data-start=\"7344\" data-end=\"7365\">app\/blog\/[slug].tsx<\/code> \u274c (wrong)<br data-start=\"7375\" data-end=\"7378\" \/><code data-start=\"7378\" data-end=\"7404\">app\/blog\/[slug]\/page.tsx<\/code> \u2705 (right)<\/p>\n<p data-start=\"7416\" data-end=\"7474\"><strong>2) Mixing Pages Router habits with App Router patterns<\/strong><\/p>\n<p data-start=\"7475\" data-end=\"7580\">App Router = folder-based routing + Server Components by default. <span class=\"\" data-state=\"closed\"><\/span><\/p>\n<p data-start=\"7582\" data-end=\"7627\"><strong>3) Expecting <code data-start=\"7599\" data-end=\"7612\">useRouter()<\/code> for everything<\/strong><\/p>\n<p data-start=\"7628\" data-end=\"7751\">In App Router, prefer <code data-start=\"7650\" data-end=\"7667\">next\/navigation<\/code> hooks like <code data-start=\"7679\" data-end=\"7692\">useParams()<\/code> for client params. <span class=\"\" data-state=\"closed\"><\/span><\/p>\n<p data-start=\"7753\" data-end=\"7798\"><strong>4) Forgetting catch-all params are arrays<\/strong><\/p>\n<p data-start=\"7799\" data-end=\"7844\"><code data-start=\"7799\" data-end=\"7810\">[...slug]<\/code> \u2192 <code data-start=\"7813\" data-end=\"7829\">slug: string[]<\/code> (not <code data-start=\"7835\" data-end=\"7843\">string<\/code>)<\/p>\n<p data-start=\"7846\" data-end=\"7888\"><strong>5) Optional catch-all can be undefined<\/strong><\/p>\n<p data-start=\"7889\" data-end=\"7922\"><code data-start=\"7889\" data-end=\"7902\">[[...slug]]<\/code> \u2192 <code data-start=\"7905\" data-end=\"7922\">slug?: string[]<\/code><\/p>\n<h2 data-start=\"7929\" data-end=\"7972\">A Simple Pattern We Use on Real Projects<\/h2>\n<p data-start=\"7974\" data-end=\"8065\">For production-grade dynamic routes (SaaS dashboards, CRMs, portals), we typically do this:<\/p>\n<ul>\n<li data-start=\"8069\" data-end=\"8116\"><strong data-start=\"8069\" data-end=\"8102\">Route param drives data fetch<\/strong> (server-side)<\/li>\n<li data-start=\"8119\" data-end=\"8182\"><strong data-start=\"8119\" data-end=\"8163\"><code data-start=\"8121\" data-end=\"8141\">generateMetadata()<\/code> uses the same fetch<\/strong> (or minimal fetch)<\/li>\n<li data-start=\"8185\" data-end=\"8241\"><strong data-start=\"8185\" data-end=\"8239\"><code data-start=\"8187\" data-end=\"8211\">generateStaticParams()<\/code> only if content is stable<\/strong><\/li>\n<li data-start=\"8244\" data-end=\"8314\"><strong data-start=\"8244\" data-end=\"8288\">Client components only for interactivity<\/strong> (filters, modals, charts)<\/li>\n<\/ul>\n<p data-start=\"8316\" data-end=\"8439\">It keeps things fast, consistent, and less likely to implode during a launch week (we like calm launches\u2014rare, but we try).<\/p>\n<h2 data-start=\"9889\" data-end=\"9964\">Conclusion: Dynamic Routes Are Simple\u2026 After We Respect the Folder Rules<\/h2>\n<p data-start=\"9966\" data-end=\"10130\">Once we embrace that the App Router is basically a <strong data-start=\"10017\" data-end=\"10055\">filesystem-powered routing machine<\/strong> (with opinions), dynamic routes become one of the nicest parts of<a href=\"https:\/\/kanhasoft.com\/nextjs-development-company.html\"> Next.js<\/a>.<\/p>\n<p data-start=\"10132\" data-end=\"10472\">Use <code data-start=\"10136\" data-end=\"10144\">[slug]<\/code> for single segments, <code data-start=\"10166\" data-end=\"10177\">[...slug]<\/code> when you need multiple segments, and <code data-start=\"10215\" data-end=\"10228\">[[...slug]]<\/code> when you want to catch \u201croot + nested paths.\u201d Add <code data-start=\"10279\" data-end=\"10303\">generateStaticParams()<\/code> when you can prebuild, and <code data-start=\"10331\" data-end=\"10351\">generateMetadata()<\/code> when you care about SEO (which we do\u2014especially for audiences across the <strong data-start=\"10425\" data-end=\"10470\">USA, UK, Israel, Switzerland, and the UAE<\/strong>).<\/p>\n<p data-start=\"10474\" data-end=\"10569\">And if it still breaks? It\u2019s probably the folder name. (We say this lovingly, from experience.)<a href=\"https:\/\/kanhasoft.com\/contact-us.html\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kanhasoft.com\/blog\/wp-content\/uploads\/2026\/02\/Ready-to-Build-with-Next.js-App-Router.png\" alt=\"Ready to Build with Next.js App Router\" width=\"1000\" height=\"250\" class=\"aligncenter size-full wp-image-6307\" srcset=\"https:\/\/kanhasoft.com\/blog\/wp-content\/uploads\/2026\/02\/Ready-to-Build-with-Next.js-App-Router.png 1000w, https:\/\/kanhasoft.com\/blog\/wp-content\/uploads\/2026\/02\/Ready-to-Build-with-Next.js-App-Router-300x75.png 300w, https:\/\/kanhasoft.com\/blog\/wp-content\/uploads\/2026\/02\/Ready-to-Build-with-Next.js-App-Router-768x192.png 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/a><\/p>\n<h2 data-start=\"8446\" data-end=\"8491\">FAQs: Dynamic Routes in Next.js App Router<\/h2>\n<h6 data-start=\"8493\" data-end=\"8551\"><strong>Q. How do we create a dynamic route in the App Router?<\/strong><\/h6>\n<p data-start=\"8552\" data-end=\"8702\"><strong>A.<\/strong> Create a folder with brackets, like <code data-start=\"8588\" data-end=\"8614\">app\/blog\/[slug]\/page.tsx<\/code>. Next.js uses the folder name as the param key. <span class=\"\" data-state=\"closed\"><\/span><\/p>\n<h6 data-start=\"8704\" data-end=\"8761\"><strong>Q. How do we read route params in an App Router page?<\/strong><\/h6>\n<p data-start=\"8762\" data-end=\"8959\"><strong>A.<\/strong> Use the <code data-start=\"8770\" data-end=\"8778\">params<\/code> prop in your Server Component page:<br data-start=\"8814\" data-end=\"8817\" \/><code data-start=\"8817\" data-end=\"8867\">export default function Page({ params }) { ... }<\/code><br data-start=\"8867\" data-end=\"8870\" \/>Dynamic APIs include <code data-start=\"8891\" data-end=\"8899\">params<\/code> and <code data-start=\"8904\" data-end=\"8918\">searchParams<\/code>. <span class=\"\" data-state=\"closed\"><\/span><\/p>\n<h6 data-start=\"8961\" data-end=\"9012\"><strong>Q. How do we read params in a Client Component?<\/strong><\/h6>\n<p data-start=\"9013\" data-end=\"9094\"><strong>A.<\/strong> Use <code data-start=\"9017\" data-end=\"9030\">useParams()<\/code> from <code data-start=\"9036\" data-end=\"9053\">next\/navigation<\/code>. <span class=\"\" data-state=\"closed\"><\/span><\/p>\n<h6 data-start=\"9096\" data-end=\"9163\"><strong>Q. What\u2019s the difference between <code data-start=\"9133\" data-end=\"9144\">[...slug]<\/code> and <code data-start=\"9149\" data-end=\"9162\">[[...slug]]<\/code>?<\/strong><\/h6>\n<p><strong>A.<\/strong><\/p>\n<ul data-start=\"9164\" data-end=\"9338\">\n<li data-start=\"9164\" data-end=\"9227\">\n<p data-start=\"9166\" data-end=\"9227\"><code data-start=\"9166\" data-end=\"9177\">[...slug]<\/code> is catch-all and requires at least one segment.<\/p>\n<\/li>\n<li data-start=\"9228\" data-end=\"9338\">\n<p data-start=\"9230\" data-end=\"9338\"><code data-start=\"9230\" data-end=\"9243\">[[...slug]]<\/code> is optional catch-all and also matches the base route. <span class=\"\" data-state=\"closed\"><\/span><\/p>\n<\/li>\n<\/ul>\n<h6 data-start=\"9340\" data-end=\"9394\"><strong>Q. How do we statically pre-render dynamic routes?<\/strong><\/h6>\n<p data-start=\"9395\" data-end=\"9522\"><strong>A.<\/strong> Export <code data-start=\"9402\" data-end=\"9426\">generateStaticParams()<\/code> from the route segment to generate paths at build time. <span class=\"\" data-state=\"closed\"><\/span><\/p>\n<h6 data-start=\"9524\" data-end=\"9575\"><strong>Q. How do we set dynamic SEO metadata per slug?<\/strong><\/h6>\n<p data-start=\"9576\" data-end=\"9666\"><strong>A.<\/strong> Use <code data-start=\"9580\" data-end=\"9600\">generateMetadata()<\/code> and access <code data-start=\"9612\" data-end=\"9625\">params.slug<\/code>. <span class=\"\" data-state=\"closed\"><\/span><\/p>\n<h6 data-start=\"9668\" data-end=\"9709\"><strong>Q. Can Route Handlers be dynamic too?<\/strong><\/h6>\n<p data-start=\"9710\" data-end=\"9882\"><strong>A.<\/strong> Yes. You can use dynamic segments in <code data-start=\"9747\" data-end=\"9774\">app\/api\/...\/[id]\/route.ts<\/code> and access <code data-start=\"9786\" data-end=\"9794\">params<\/code>. Route handlers are App Router\u2019s API mechanism.<\/p>\n<p data-start=\"2724\" data-end=\"2883\">\n","protected":false},"excerpt":{"rendered":"<p>Dynamic routes are one of those Next.js things that feel obvious right up until we\u2019re staring at an app\/ folder at 1:17 AM thinking, \u201cWhy is [slug] not slugging?\u201d (Yes, we\u2019ve been there. No, we didn\u2019t handle it with grace. If you\u2019re using the Next.js App Router, dynamic routing is <a href=\"https:\/\/kanhasoft.com\/blog\/how-do-we-implement-dynamic-routes-using-the-next-js-app-router\/\" class=\"more-link\">Read More<\/a><\/p>\n","protected":false},"author":3,"featured_media":6308,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[274],"tags":[],"class_list":["post-6300","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-next-js-application-development"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Implement Dynamic Routes in Next.js App Router<\/title>\n<meta name=\"description\" content=\"How to implement dynamic routes in Next.js App Router using [slug], [...slug], &amp; [[...slug]], plus generateStaticParams &amp; generateMetadata.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kanhasoft.com\/blog\/how-do-we-implement-dynamic-routes-using-the-next-js-app-router\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Implement Dynamic Routes in Next.js App Router\" \/>\n<meta property=\"og:description\" content=\"How to implement dynamic routes in Next.js App Router using [slug], [...slug], &amp; [[...slug]], plus generateStaticParams &amp; generateMetadata.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kanhasoft.com\/blog\/how-do-we-implement-dynamic-routes-using-the-next-js-app-router\/\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kanhasoft\" \/>\n<meta property=\"article:published_time\" content=\"2026-02-13T11:06:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kanhasoft.com\/blog\/wp-content\/uploads\/2026\/02\/How-Do-We-Implement-Dynamic-Routes-Using-the-Next.js-App-Router.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1400\" \/>\n\t<meta property=\"og:image:height\" content=\"425\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Manoj Bhuva\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@kanhasoft\" \/>\n<meta name=\"twitter:site\" content=\"@kanhasoft\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Manoj Bhuva\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\\\/\\\/kanhasoft.com\\\/blog\\\/how-do-we-implement-dynamic-routes-using-the-next-js-app-router\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/kanhasoft.com\\\/blog\\\/how-do-we-implement-dynamic-routes-using-the-next-js-app-router\\\/\"},\"author\":{\"name\":\"Manoj Bhuva\",\"@id\":\"https:\\\/\\\/kanhasoft.com\\\/blog\\\/#\\\/schema\\\/person\\\/037907a7ce62ee1ceed7a91652b16122\"},\"headline\":\"How Do We Implement Dynamic Routes Using the Next.js App Router?\",\"datePublished\":\"2026-02-13T11:06:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/kanhasoft.com\\\/blog\\\/how-do-we-implement-dynamic-routes-using-the-next-js-app-router\\\/\"},\"wordCount\":962,\"publisher\":{\"@id\":\"https:\\\/\\\/kanhasoft.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/kanhasoft.com\\\/blog\\\/how-do-we-implement-dynamic-routes-using-the-next-js-app-router\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/kanhasoft.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/02\\\/How-Do-We-Implement-Dynamic-Routes-Using-the-Next.js-App-Router.png\",\"articleSection\":[\"Next JS Application Development\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/kanhasoft.com\\\/blog\\\/how-do-we-implement-dynamic-routes-using-the-next-js-app-router\\\/\",\"url\":\"https:\\\/\\\/kanhasoft.com\\\/blog\\\/how-do-we-implement-dynamic-routes-using-the-next-js-app-router\\\/\",\"name\":\"How to Implement Dynamic Routes in Next.js App Router\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/kanhasoft.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/kanhasoft.com\\\/blog\\\/how-do-we-implement-dynamic-routes-using-the-next-js-app-router\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/kanhasoft.com\\\/blog\\\/how-do-we-implement-dynamic-routes-using-the-next-js-app-router\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/kanhasoft.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/02\\\/How-Do-We-Implement-Dynamic-Routes-Using-the-Next.js-App-Router.png\",\"datePublished\":\"2026-02-13T11:06:17+00:00\",\"description\":\"How to implement dynamic routes in Next.js App Router using [slug], [...slug], & [[...slug]], plus generateStaticParams & generateMetadata.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/kanhasoft.com\\\/blog\\\/how-do-we-implement-dynamic-routes-using-the-next-js-app-router\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/kanhasoft.com\\\/blog\\\/how-do-we-implement-dynamic-routes-using-the-next-js-app-router\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/kanhasoft.com\\\/blog\\\/how-do-we-implement-dynamic-routes-using-the-next-js-app-router\\\/#primaryimage\",\"url\":\"https:\\\/\\\/kanhasoft.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/02\\\/How-Do-We-Implement-Dynamic-Routes-Using-the-Next.js-App-Router.png\",\"contentUrl\":\"https:\\\/\\\/kanhasoft.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/02\\\/How-Do-We-Implement-Dynamic-Routes-Using-the-Next.js-App-Router.png\",\"width\":1400,\"height\":425},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/kanhasoft.com\\\/blog\\\/how-do-we-implement-dynamic-routes-using-the-next-js-app-router\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/kanhasoft.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How Do We Implement Dynamic Routes Using the Next.js App Router?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/kanhasoft.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/kanhasoft.com\\\/blog\\\/\",\"name\":\"\",\"description\":\"Web and Mobile Application Development Agency\",\"publisher\":{\"@id\":\"https:\\\/\\\/kanhasoft.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/kanhasoft.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/kanhasoft.com\\\/blog\\\/#organization\",\"name\":\"Kanhasoft\",\"url\":\"https:\\\/\\\/kanhasoft.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/kanhasoft.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"http:\\\/\\\/192.168.1.31:890\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/04\\\/cropped-cropped-Kahnasoft-Web-and-mobile-app-development-1.png\",\"contentUrl\":\"http:\\\/\\\/192.168.1.31:890\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/04\\\/cropped-cropped-Kahnasoft-Web-and-mobile-app-development-1.png\",\"width\":239,\"height\":56,\"caption\":\"Kanhasoft\"},\"image\":{\"@id\":\"https:\\\/\\\/kanhasoft.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/kanhasoft\",\"https:\\\/\\\/x.com\\\/kanhasoft\",\"https:\\\/\\\/www.instagram.com\\\/kanhasoft\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/kanhasoft\\\/\",\"https:\\\/\\\/in.pinterest.com\\\/kanhasoft\\\/_created\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/kanhasoft.com\\\/blog\\\/#\\\/schema\\\/person\\\/037907a7ce62ee1ceed7a91652b16122\",\"name\":\"Manoj Bhuva\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/675e142db3f0e3e42ef6c7f7a13c6f72ac33412f2d0096e342e8033f8388238a?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/675e142db3f0e3e42ef6c7f7a13c6f72ac33412f2d0096e342e8033f8388238a?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/675e142db3f0e3e42ef6c7f7a13c6f72ac33412f2d0096e342e8033f8388238a?s=96&d=mm&r=g\",\"caption\":\"Manoj Bhuva\"},\"sameAs\":[\"https:\\\/\\\/kanhasoft.com\\\/\"],\"url\":\"https:\\\/\\\/kanhasoft.com\\\/blog\\\/author\\\/ceo\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Implement Dynamic Routes in Next.js App Router","description":"How to implement dynamic routes in Next.js App Router using [slug], [...slug], & [[...slug]], plus generateStaticParams & generateMetadata.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kanhasoft.com\/blog\/how-do-we-implement-dynamic-routes-using-the-next-js-app-router\/","og_locale":"en_US","og_type":"article","og_title":"How to Implement Dynamic Routes in Next.js App Router","og_description":"How to implement dynamic routes in Next.js App Router using [slug], [...slug], & [[...slug]], plus generateStaticParams & generateMetadata.","og_url":"https:\/\/kanhasoft.com\/blog\/how-do-we-implement-dynamic-routes-using-the-next-js-app-router\/","article_publisher":"https:\/\/www.facebook.com\/kanhasoft","article_published_time":"2026-02-13T11:06:17+00:00","og_image":[{"width":1400,"height":425,"url":"https:\/\/kanhasoft.com\/blog\/wp-content\/uploads\/2026\/02\/How-Do-We-Implement-Dynamic-Routes-Using-the-Next.js-App-Router.png","type":"image\/png"}],"author":"Manoj Bhuva","twitter_card":"summary_large_image","twitter_creator":"@kanhasoft","twitter_site":"@kanhasoft","twitter_misc":{"Written by":"Manoj Bhuva","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/kanhasoft.com\/blog\/how-do-we-implement-dynamic-routes-using-the-next-js-app-router\/#article","isPartOf":{"@id":"https:\/\/kanhasoft.com\/blog\/how-do-we-implement-dynamic-routes-using-the-next-js-app-router\/"},"author":{"name":"Manoj Bhuva","@id":"https:\/\/kanhasoft.com\/blog\/#\/schema\/person\/037907a7ce62ee1ceed7a91652b16122"},"headline":"How Do We Implement Dynamic Routes Using the Next.js App Router?","datePublished":"2026-02-13T11:06:17+00:00","mainEntityOfPage":{"@id":"https:\/\/kanhasoft.com\/blog\/how-do-we-implement-dynamic-routes-using-the-next-js-app-router\/"},"wordCount":962,"publisher":{"@id":"https:\/\/kanhasoft.com\/blog\/#organization"},"image":{"@id":"https:\/\/kanhasoft.com\/blog\/how-do-we-implement-dynamic-routes-using-the-next-js-app-router\/#primaryimage"},"thumbnailUrl":"https:\/\/kanhasoft.com\/blog\/wp-content\/uploads\/2026\/02\/How-Do-We-Implement-Dynamic-Routes-Using-the-Next.js-App-Router.png","articleSection":["Next JS Application Development"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/kanhasoft.com\/blog\/how-do-we-implement-dynamic-routes-using-the-next-js-app-router\/","url":"https:\/\/kanhasoft.com\/blog\/how-do-we-implement-dynamic-routes-using-the-next-js-app-router\/","name":"How to Implement Dynamic Routes in Next.js App Router","isPartOf":{"@id":"https:\/\/kanhasoft.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kanhasoft.com\/blog\/how-do-we-implement-dynamic-routes-using-the-next-js-app-router\/#primaryimage"},"image":{"@id":"https:\/\/kanhasoft.com\/blog\/how-do-we-implement-dynamic-routes-using-the-next-js-app-router\/#primaryimage"},"thumbnailUrl":"https:\/\/kanhasoft.com\/blog\/wp-content\/uploads\/2026\/02\/How-Do-We-Implement-Dynamic-Routes-Using-the-Next.js-App-Router.png","datePublished":"2026-02-13T11:06:17+00:00","description":"How to implement dynamic routes in Next.js App Router using [slug], [...slug], & [[...slug]], plus generateStaticParams & generateMetadata.","breadcrumb":{"@id":"https:\/\/kanhasoft.com\/blog\/how-do-we-implement-dynamic-routes-using-the-next-js-app-router\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kanhasoft.com\/blog\/how-do-we-implement-dynamic-routes-using-the-next-js-app-router\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/kanhasoft.com\/blog\/how-do-we-implement-dynamic-routes-using-the-next-js-app-router\/#primaryimage","url":"https:\/\/kanhasoft.com\/blog\/wp-content\/uploads\/2026\/02\/How-Do-We-Implement-Dynamic-Routes-Using-the-Next.js-App-Router.png","contentUrl":"https:\/\/kanhasoft.com\/blog\/wp-content\/uploads\/2026\/02\/How-Do-We-Implement-Dynamic-Routes-Using-the-Next.js-App-Router.png","width":1400,"height":425},{"@type":"BreadcrumbList","@id":"https:\/\/kanhasoft.com\/blog\/how-do-we-implement-dynamic-routes-using-the-next-js-app-router\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kanhasoft.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How Do We Implement Dynamic Routes Using the Next.js App Router?"}]},{"@type":"WebSite","@id":"https:\/\/kanhasoft.com\/blog\/#website","url":"https:\/\/kanhasoft.com\/blog\/","name":"","description":"Web and Mobile Application Development Agency","publisher":{"@id":"https:\/\/kanhasoft.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kanhasoft.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/kanhasoft.com\/blog\/#organization","name":"Kanhasoft","url":"https:\/\/kanhasoft.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/kanhasoft.com\/blog\/#\/schema\/logo\/image\/","url":"http:\/\/192.168.1.31:890\/blog\/wp-content\/uploads\/2022\/04\/cropped-cropped-Kahnasoft-Web-and-mobile-app-development-1.png","contentUrl":"http:\/\/192.168.1.31:890\/blog\/wp-content\/uploads\/2022\/04\/cropped-cropped-Kahnasoft-Web-and-mobile-app-development-1.png","width":239,"height":56,"caption":"Kanhasoft"},"image":{"@id":"https:\/\/kanhasoft.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kanhasoft","https:\/\/x.com\/kanhasoft","https:\/\/www.instagram.com\/kanhasoft\/","https:\/\/www.linkedin.com\/company\/kanhasoft\/","https:\/\/in.pinterest.com\/kanhasoft\/_created\/"]},{"@type":"Person","@id":"https:\/\/kanhasoft.com\/blog\/#\/schema\/person\/037907a7ce62ee1ceed7a91652b16122","name":"Manoj Bhuva","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/675e142db3f0e3e42ef6c7f7a13c6f72ac33412f2d0096e342e8033f8388238a?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/675e142db3f0e3e42ef6c7f7a13c6f72ac33412f2d0096e342e8033f8388238a?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/675e142db3f0e3e42ef6c7f7a13c6f72ac33412f2d0096e342e8033f8388238a?s=96&d=mm&r=g","caption":"Manoj Bhuva"},"sameAs":["https:\/\/kanhasoft.com\/"],"url":"https:\/\/kanhasoft.com\/blog\/author\/ceo\/"}]}},"_links":{"self":[{"href":"https:\/\/kanhasoft.com\/blog\/wp-json\/wp\/v2\/posts\/6300","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kanhasoft.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kanhasoft.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kanhasoft.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/kanhasoft.com\/blog\/wp-json\/wp\/v2\/comments?post=6300"}],"version-history":[{"count":5,"href":"https:\/\/kanhasoft.com\/blog\/wp-json\/wp\/v2\/posts\/6300\/revisions"}],"predecessor-version":[{"id":6309,"href":"https:\/\/kanhasoft.com\/blog\/wp-json\/wp\/v2\/posts\/6300\/revisions\/6309"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kanhasoft.com\/blog\/wp-json\/wp\/v2\/media\/6308"}],"wp:attachment":[{"href":"https:\/\/kanhasoft.com\/blog\/wp-json\/wp\/v2\/media?parent=6300"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kanhasoft.com\/blog\/wp-json\/wp\/v2\/categories?post=6300"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kanhasoft.com\/blog\/wp-json\/wp\/v2\/tags?post=6300"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}