Groupes de routes et mises en page imbriquées
Organisez des projets App Router complexes à l’aide de groupes de routes, de mises en page imbriquées et de fichiers de modèles pour une interface commune ou propre à chaque section.
Groupes de routes et mises en page imbriquées est une leçon Next.js 15 Fullstack (App Router + Server Actions) gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Next.js 15 Fullstack (App Router + Server Actions), et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Next.js 15 Fullstack (App Router + Server Actions) comprend 4 leçons au total.
Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.
Why Organization Matters
As an app grows, the App Router lets you structure folders for shared UI without affecting the URL. Route groups and nested layouts are the main tools.
Nested Layouts Recap
Each folder can have a layout.tsx. Layouts nest: a section layout wraps its pages while the root layout wraps everything.
export default function DashboardLayout({ children }) {
return (<section><nav>Dashboard nav</nav>{children}</section>);
}Route Groups
Wrapping a folder name in parentheses, like (marketing), creates a route group. It organizes files but is omitted from the URL.
Multiple Root Layouts
Route groups let you have different top-level layouts — for example, one for marketing pages and another for the app — by giving each group its own layout.
app/
(marketing)/layout.tsx
(marketing)/page.tsx
(app)/layout.tsx
(app)/dashboard/page.tsxURLs Stay Clean
Because (marketing) does not appear in the path, app/(marketing)/page.tsx still serves the URL /, not /marketing.
Template vs Layout
A template.tsx is like a layout but creates a new instance on every navigation, resetting state — useful for enter animations or per-route effects.
export default function Template({ children }) {
return <div className="fade-in">{children}</div>;
}When to Use Template
Use a template when you need state or effects to re-run on each navigation; use a layout when you want shared UI and state to persist across navigations.
Organizing Without Routing
You can also use route groups purely to colocate related routes under one folder without adding a URL segment, keeping the codebase tidy.
Shared UI in Layouts
Put navigation, sidebars, and providers in the nearest layout so they persist and avoid re-rendering on navigation within that section.
Loading and Error per Section
Each segment, including grouped ones, can have its own loading.tsx and error.tsx, scoping fallback UI precisely.
Putting It Together
A typical app: a (marketing) group with a public layout, an (app) group with an authenticated layout, each nesting further section layouts.
Quick Check
What does wrapping a folder name in parentheses do?
Recap
You learned to structure apps with nested layouts for persistent shared UI, route groups (name) that organize without changing URLs and allow multiple root layouts, and templates that remount on navigation.
Apprends TypeScript avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 22
- Leçons
- 88
Questions Fréquemment Posées
La leçon « Groupes de routes et mises en page imbriquées » est-elle gratuite ?
Oui — le texte complet de « Groupes de routes et mises en page imbriquées » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Next.js 15 Fullstack (App Router + Server Actions), passe à CoddyKit PRO. Le cours Next.js 15 Fullstack (App Router + Server Actions) comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Groupes de routes et mises en page imbriquées » ?
Organisez des projets App Router complexes à l’aide de groupes de routes, de mises en page imbriquées et de fichiers de modèles pour une interface commune ou propre à chaque section. Tu pratiques Next.js 15 Fullstack (App Router + Server Actions) avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Next.js 15 Fullstack (App Router + Server Actions) ?
Aucune expérience préalable n'est requise. Next.js 15 Fullstack (App Router + Server Actions) sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Groupes de routes et mises en page imbriquées » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Next.js 15 Fullstack (App Router + Server Actions) ?
Oui. Chaque leçon Next.js 15 Fullstack (App Router + Server Actions) inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Mises en page et composants de page
- Routes dynamiques et paramètres
- Interfaces de chargement et d’erreur
- Groupes de routes et mises en page imbriquées