🔀
App Router & Routing

Dynamic Routes

[slug], [...catchAll]
💡 Dynamic, routes, EK, "TEMPLATE, LETTER" jaise, HAIN — [slug], EK, PLACEHOLDER, hai — /blog/hello, /blog/world, SAB, SAME, TEMPLATE, USE, karte, HAIN, DIFFERENT, "FILLED-IN" VALUES, ke, saath.

[folderName], SQUARE, BRACKETS, mein, EK, folder, naam, EK, DYNAMIC, SEGMENT, DEFINE, karta hai — jaise, app/blog/[slug]/page.js, /blog/anything, ko, MATCH, karta hai.

[...slug] (CATCH-ALL) MULTIPLE, SEGMENTS, ko, MATCH, karta hai — jaise, /shop/a/b/c. [[...slug]] (OPTIONAL, CATCH-ALL) ROOT, ROUTE, ko, bhi, MATCH, karta hai.

// app/blog/[slug]/page.js:
export default function BlogPost({ params }) {
  return <h1>Post: {params.slug}</h1>;
}
// /blog/hello-world → params.slug = "hello-world"

// app/shop/[...slug]/page.js:
// /shop/a/b/c → params.slug = ["a", "b", "c"]
🔀
Dynamic, routes, EK, "TEMPLATE, LETTER" jaise, HAIN — [slug], EK, PLACEHOLDER, hai — /blog/hello, /blog/world, SAB, SAME, TEMPLATE, USE, karte, HAIN, DIFFERENT, "FILLED-IN" VALUES, ke, saath.
1 / 2
⚡ Quick Recap
  • [slug] = single, dynamic, segment. [...slug] = multiple, segments (catch-all)
  • params object, se, ACTUAL, URL, values, mil, jaati, hain
  • [[...slug]] = optional, catch-all, root, route, ko, bhi, match, karta, hai
Is page mein (2 subtopics)

generateStaticParams(), dynamic, routes, ko, BUILD-TIME, PAR, PRE-RENDER, karne, ke, liye, USE, hota hai — jaise, EK, blog, ke, saare, KNOWN, slugs, ke, liye, PAGES, PRE-GENERATE, karna.

export async function generateStaticParams() {
  const posts = await getAllPosts();
  return posts.map(post => ({ slug: post.slug }));
}

dynamicParams: false, EXPORT, karके, generateStaticParams(), mein, LIST, na, kiye, gaye, routes, ke, liye, 404, FORCE, ki, ja, sakti, hai — DEFAULT, mein, Next.js, UNKNOWN, params, ke, liye, bhi, RUNTIME, PAR, render, karne, ki, KOSHISH, karta hai.

💡Tip: dynamicParams: false, useful, hai, jab, TUM, CHAHTE, HO, ki, SIRF, EXPLICITLY, generate, ki, gayi, pages, hi, EXIST, karein — koi, "SURPRISE" runtime, pages, na, ho.