Routes dynamiques et slugs Next.js : Guide développeur

Next.js utilise le routage basé sur le système de fichiers avec la syntaxe entre crochets pour les segments dynamiques : [slug].

Route dynamique de base

// app/blog/[slug]/page.tsx
export default function BlogPost({ params }: { params: { slug: string } }) {
  return <h1>{params.slug}</h1>;
}

Générer les paramètres statiques

export async function generateStaticParams() {
  const posts = await getPosts();
  return posts.map(post => ({ slug: post.slug }));
}

Routes catch-all

[...slug] correspond à /a/b/c. [[...slug]] correspond également à la racine.

Générez des slugs

Utilisez notre générateur de slugs URL ou le convertisseur kebab-case.