Dinamik rotalar ve generateStaticParams nasıl çalışır?

Question

Accepted Answer

**Dinamik rotalar** değişken URL segmentlerini eşleştirmek için köşeli parantez içinde klasör adları kullanır ve **`generateStaticParams`** Next.js'ye derleme sırasında bu sayfaların hangilerinin önceden işlenmesi gerektiğini söyler (SSG/ISR için). ## Dinamik 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 — belirli sayfaları önceden işle ```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 } ``` Bu olmadan, dinamik rota talep üzerine işlenir (SSR). **Bununla birlikte**, Next.js derleme sırasında döndürülen her parametre için statik bir sayfa önceden oluşturur — bilinen bir dinamik sayfa seti için SSG'nin hızını sağlar (her blog yazısı, her ürün). ## Listede olmayan parametreleri işleme ```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 ``` Bu, en iyi/en yaygın sayfalarınızı önceden oluşturmanıza ve yine de uzun kuyruk için hizmet vermenize (veya 404) izin verir. ## Catch-all ve iç içe parametreler ```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" }]; } ``` ## Neden önemli Bu çift, dinamik sayfaların geniş setlerini (bloglar, e-ticaret katalogları, dokümantasyon) üst performans ve SEO için statik olarak oluşturmanın yoluyken, `dynamicParams` önceden oluşturulmayan sayfalar için fallback'i kontrol eder. `generateStaticParams` (hangi sayfaları önceden oluşturulacağını) ve önbelleğe alma/`revalidate` seçeneklerini anlamak, App Router'da dinamik içerik için SSG/ISR yapmanın temelini oluşturur.