Si funksionojnë rutën dinamike dhe generateStaticParams?

Question

Accepted Answer

**Rutët dinamike** përdorin emra kartele në kllapa për të përputhur segmente URL-i variabël, dhe **`generateStaticParams`** i thotë Next.js se cilët nga këto faqe duhet të renderohen paraprakisht në kohën e ndërtimit (për SSG/ISR). ## Segmenti 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 — rendero paraprakisht faqet specifike ```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 } ``` Pa këtë, një rute dinamike renderohet sipas kërkesës (SSR). **Me** të, Next.js gjeneron paraprakisht një faqe statike për secilin parametër të kthyer në ndërtim — duke ju dhënë shpejtësinë e SSG për një grup të njohur të faqeve dinamike (çdo postim blogi, çdo produkt). ## Trajtimi i parametrave jo në 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 ``` Kjo ju lejon të ndërtoni paraprakisht faqet tuaja më të mëdha/më të zakonshme dhe të shërbeni ende (ose 404) për bishtin e gjatë. ## Catch-all dhe parametra të ndërlikuara ```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" }]; } ``` ## Pse është e rëndësishme Ky çift është se si statikisht gjeroni grupe të mëdha të faqeve dinamike (bloga, kataloga e-tregtie, dokumentacioni) për performancë dhe SEO superiore, ndërsa `dynamicParams` kontrollon fallback-un për faqet që nuk janë ndërtuar paraprakisht. Shqiptimi i `generateStaticParams` (cilat faqe të ndërtosh paraprakisht) plus mundësitë e cachirimit/`revalidate` është bërthama e bërjes SSG/ISR për përmbajtje dinamike në App Router.