Bagaimanakah dynamic routes dan generateStaticParams berfungsi?

Question

Accepted Answer

**Dynamic routes** menggunakan nama folder berkurungan untuk memadankan segmen URL yang berubah-ubah, dan **`generateStaticParams`** memberitahu Next.js halaman mana antaranya yang perlu dipra-render pada masa build (untuk SSG/ISR). ## Segmen dinamik ```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 — pra-render halaman tertentu ```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 ini, dynamic route di-render atas permintaan (SSR). **Dengan** ia, Next.js pra-menjana halaman statik bagi setiap param yang dikembalikan semasa build — memberikan anda kepantasan SSG untuk set halaman dinamik yang diketahui (setiap catatan blog, setiap produk). ## Mengendalikan params yang tiada dalam senarai ```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 ``` Ini membolehkan anda pra-membina halaman teratas/paling biasa dan masih menyampaikan (atau memberi 404) bagi ekor panjang. ## Catch-all dan params bersarang ```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" }]; } ``` ## Mengapa ia penting Pasangan ini ialah cara anda menjana secara statik set besar halaman dinamik (blog, katalog e-dagang, dokumentasi) untuk prestasi dan SEO terbaik, manakala `dynamicParams` mengawal sandaran (fallback) bagi halaman yang tidak dibina lebih awal. Memahami `generateStaticParams` (halaman mana untuk dipra-bina) berserta opsyen caching/`revalidate` ialah inti melakukan SSG/ISR untuk kandungan dinamik dalam App Router.