Route Groups

React 🟡 Mid

Definition

Dossiers parentheses (group) dans App Router qui organisent les routes sans affecter l'URL. Permettent des layouts differents pour des sections de l'app.

Analogie

Comme des dossiers de classement invisibles : ils organisent les papiers mais ne changent pas l'adresse postale.

Exemple de code

// app/(marketing)/about/page.tsx  -> /about
// app/(marketing)/layout.tsx      -> layout marketing
// app/(dashboard)/admin/page.tsx  -> /admin
// app/(dashboard)/layout.tsx      -> layout dashboard

Cas d'usage

Separer les layouts (public vs dashboard) ou organiser le code sans impacter les URLs.

#nextjs#routing