Comment les routes dynamiques et generateStaticParams fonctionnent-elles ?

Question

Accepted Answer

**Les routes dynamiques** utilisent des noms de dossiers entre crochets pour correspondre à des segments d'URL variables, et **`generateStaticParams`** indique à Next.js quelles pages pré-rendre au moment de la compilation (pour SSG/ISR). ## Segment dynamique ```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 — pré-rendre des pages spécifiques ```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 } ``` Sans cela, une route dynamique est rendue à la demande (SSR). **Avec** elle, Next.js pré-génère une page statique pour chaque paramètre retourné à la compilation — vous donnant la vitesse du SSG pour un ensemble connu de pages dynamiques (chaque article de blog, chaque produit). ## Gérer les paramètres ne figurant pas dans la liste ```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 ``` Cela vous permet de pré-construire vos pages principales/les plus communes et de servir (ou de retourner 404) la longue traîne. ## Catch-all et paramètres imbriqués ```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" }]; } ``` ## Pourquoi c'est important Cette paire est la façon dont vous générez statiquement de grands ensembles de pages dynamiques (blogs, catalogues e-commerce, docs) pour une performance et un référencement optimaux, tandis que `dynamicParams` contrôle le repli pour les pages non construites à l'avance. Comprendre `generateStaticParams` (quelles pages pré-construire) plus les options de cache/`revalidate` est le cœur de faire du SSG/ISR pour du contenu dynamique dans l'App Router.