Jak działają dynamiczne trasy i generateStaticParams?

Question

Accepted Answer

**Dynamiczne trasy** używają nazwisk folderów w nawiasach kwadratowych, aby dopasować zmienne segmenty URL, a **`generateStaticParams`** mówi Next.js, które strony mają być wstępnie renderowane podczas budowania (dla SSG/ISR). ## Segment dynamiczny ```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 — wstępne renderowanie określonych stron ```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 } ``` Bez tego dynamiczna trasa jest renderowana na żądanie (SSR). **Z tym** Next.js wstępnie generuje statyczną stronę dla każdego zwróconego parametru podczas budowania — dając Ci szybkość SSG dla znanego zestawu dynamicznych stron (każdy artykuł bloga, każdy produkt). ## Obsługa parametrów spoza listy ```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 ``` Toć pozwala Ci wstępnie budować swoje najważniejsze/najczęściej odwiedzane strony i nadal obsługiwać (lub zwrócić 404) długi ogon. ## Catch-all i parametry zagnieżdżone ```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" }]; } ``` ## Dlaczego to ważne Ta para określa, jak statycznie generujesz duże zestawy dynamicznych stron (blogi, katalogi e-commerce, dokumentacja) dla najlepszej wydajności i SEO, podczas gdy `dynamicParams` kontroluje fallback dla stron niezbudowanych z wyprzedzeniem. Zrozumienie `generateStaticParams` (które strony wstępnie budować) oraz opcji cache/`revalidate` to jądro SSG/ISR dla dynamicznej treści w App Router.