Dynamic routes lan generateStaticParams ngapunten?

Question

Accepted Answer

**Dynamic routes** nggunakake foldernames sing dikurung kanggo match variable URL segments, lan **`generateStaticParams`** ngandhani Next.js payne page sing kudu di-pre-render ing build time (kanggo SSG/ISR). ## Dynamic segment ```tsx // app/blog/[slug]/page.tsx → matches /blog/hello, /blog/anything export default async function Post({ params }: { params: { slug: string } }) { const post = await getPost(params.slug); // params.slug is the URL value return

{post.title}

; } ``` ## generateStaticParams — pre-render page spesifik ```tsx // Tell Next.js the list of slugs to build statically export async function generateStaticParams() { const posts = await getAllPosts(); return posts.map(post => ({ slug: post.slug })); // → builds /blog/post-1, /blog/post-2, ... as static HTML at build time } ``` Tanpa iki, dynamic route dirender on-demand (SSR). **Kanthi** iki, Next.js pre-generates static page kanggo saben param sing dibalekake ing build — menehi kowe speed SSG kanggo set known dynamic pages (saben blog post, saben product). ## Nangani params sing ora ing list ```tsx // what happens for a slug NOT returned by generateStaticParams? export const dynamicParams = true; // (default) render unknown slugs on-demand (ISR-like) // export const dynamicParams = false; // return 404 for any slug not pre-built ``` Iki ngidini kowe pre-build top/most-common pages lan tetep layani (utawa 404) long tail. ## Catch-all lan nested params ```text app/shop/[...categories]/page.tsx → /shop/a/b/c (params.categories = ['a','b','c']) app/[lang]/[slug]/page.tsx → multiple params: { lang, slug } ``` ```tsx export async function generateStaticParams() { return [{ lang: "en", slug: "about" }, { lang: "vi", slug: "about" }]; } ``` ## Dene penting Pair iki carane kowe statically generate set besar dynamic pages (blogs, e-commerce catalogs, docs) kanggo top performance lan SEO, dene `dynamicParams` kontrol fallback kanggo pages ora dibangun ndhisik. Gawe ngerti `generateStaticParams` (payne page pre-build) plus caching/`revalidate` options iku core saka nggawe SSG/ISR kanggo dynamic content ing App Router.