Hogyan működnek a dinamikus útvonalak és a generateStaticParams?

Question

Accepted Answer

A **dinamikus útvonalak** szögletes zárójeleken belüli mappanéveket használnak a változó URL-szegmensek egyeztetésére, a **`generateStaticParams`** pedig azt mondja a Next.js-nek, hogy mely oldalakat renderizelje elő a fordítási időben (SSG/ISR-hez). ## Dinamikus szegmens ```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 — adott oldalak előzetes renderelése ```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 } ``` Enélkül a dinamikus útvonal igény szerinti renderelésre kerül (SSR). **Vele** a Next.js a fordítás során az összes visszaadott paraméterhez előzetesen generál egy statikus oldalt — az SSG sebességét adva Önnek egy ismert dinamikus oldalakra vonatkozó készlethez (minden blogbejegyzés, minden termék). ## A listában nem szereplő paraméterek kezelése ```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 ``` Ez lehetővé teszi az Ön felső/leggyakoribb oldalainak előzetes építését és továbbra is a hosszú végét szolgálni (vagy 404-et adni). ## Catch-all és beágyazott paraméterek ```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" }]; } ``` ## Miért fontos Ez a pár az a módja, ahogy statikusan generál nagy dinamikus oldalakészleteket (blogok, e-commerce katalógusok, dokumentáció) a felső teljesítmény és SEO érdekében, miközben a `dynamicParams` az előre nem létrehozott oldalak fallbackját vezérli. A `generateStaticParams` (mely oldalakat kell előzetesen felépíteni) és a cache/`revalidate` opciók megértése az App Routerben a dinamikus tartalom SSG/ISR-jének alapja.