Kif jaħdmu dynamic routes u generateStaticParams?

Question

Accepted Answer

**Dynamic routes** jużaw ismijiet ta' folders b'parentesi kwadri biex jaqblu segmenti ta' URL varjabbli, u **`generateStaticParams`** jgħid lil Next.js liema minn dawk il-pages għandhom jiġu pre-rendered fil-build time (għal 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 pages speċifiċi ```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 } ``` Bla dan, dynamic route jiġi rendered on-demand (SSR). **Bil-** dan, Next.js pre-generates page statiku għal kull param ritornata fil-build — u tagħtik il-veloċità tal-SSG għal sett magħruf ta' dynamic pages (kull blog post, kull prodott). ## Manejo tal-params li mhumiex fil-lista ```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 ``` Dan jippermettilek li pre-build il-top/most-common pages tiegħek u għadek tservi (jew 404) il-long tail. ## Catch-all u 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" }]; } ``` ## Għaliex dan huwa importanti Dal-pairing huwa kif statikament tiġġenera settijiet kbar ta' dynamic pages (blogs, e-commerce catalogs, docs) għal performance u SEO top, filwaqt li `dynamicParams` jikkontrolla l-fallback għal pages li ma ġewx mibnija minn qabel. L-għarfien ta' `generateStaticParams` (liema pages biex pre-build) flimkien mal-options tal-caching/`revalidate` huwa l-ħamm ta' wieħed li jsir SSG/ISR għal dynamic content fl-App Router.