Cours Next.js · Module 2: Routing et layouts
Regroupement et organisation des routes
Dans cette leçon6
Au cœur de Metropolis Quantum, le système de gestion de l'espace urbain repose sur le concept de districts thématiques et de zones fonctionnelles. La ville est divisée en zones reconnaissables - un district scientifique, une zone résidentielle, un district de divertissement, et bien d'autres. Ces zones sont séparées les unes des autres mais fonctionnent ensemble comme les éléments d'un organisme urbain unique et cohérent.
De la même manière, dans Next.js 16, on peut organiser et regrouper les routes de notre application pour améliorer la clarté du code, faciliter la gestion et permettre des stratégies de chargement plus flexibles et l'isolation des composants.
Route Groups
Dans l'App Router, on peut créer des route groups qui n'ont aucun impact sur la structure réelle de l'URL en plaçant un répertoire entre parenthèses, par exemple : (nomDuGroupe). C'est une fonctionnalité puissante qui permet une organisation logique du code sans modifier son comportement ni son API publique.
Structure et syntaxe des route groups
Les route groups se définissent en plaçant le nom du répertoire entre parenthèses :
1app/
2 ├── (marketing)/ # Groupe pour les pages marketing
3 │ ├── about/
4 │ │ └── page.tsx # /about
5 │ ├── blog/
6 │ │ └── page.tsx # /blog
7 │ └── layout.tsx # Mise en page partagée pour les pages marketing
8 │
9 ├── (shop)/ # Groupe pour les pages de la boutique
10 │ ├── products/
11 │ │ └── page.tsx # /products
12 │ ├── cart/
13 │ │ └── page.tsx # /cart
14 │ └── layout.tsx # Mise en page partagée pour les pages de la boutique
15 │
16 └── layout.tsx # Mise en page principale de l'applicationDans cet exemple, les routes /about et /blog font partie du groupe (marketing), tandis que /products et /cart font partie du groupe (shop). Note que les route groups n'affectent pas les URL réelles - le répertoire (marketing) ne fait pas partie du chemin de l'URL /about.
Cas d'usage des route groups
1. Organisation des fichiers et des dossiers
L'usage le plus simple des route groups est l'organisation logique des fichiers, surtout dans les applications plus volumineuses :
1app/
2 ├── (main)/ # Pages publiques principales
3 │ ├── page.tsx # Accueil (/)
4 │ ├── about/ # /about
5 │ └── contact/ # /contact
6 │
7 ├── (auth)/ # Pages liées à l'authentification
8 │ ├── login/ # /login
9 │ ├── register/ # /register
10 │ └── forgot-password/ # /forgot-password
11 │
12 ├── (dashboard)/ # Pages du tableau de bord (protégées)
13 │ ├── account/ # /account
14 │ ├── settings/ # /settings
15 │ └── billing/ # /billing
16 │
17 └── layout.tsx # Mise en page principale2. Partager des mises en page entre des routes précises
L'un des usages les plus puissants des route groups est la possibilité de définir des mises en page partagées pour des groupes de pages précis, sans affecter les chemins d'URL :
1// app/(marketing)/layout.tsx - Mise en page pour les pages marketing
2export default function MarketingLayout({
3 children,
4}: {
5 children: React.ReactNode;
6}) {
7 return (
8 <div className="marketing-layout">
9 <nav className="marketing-nav">
10 <a href="/about">À propos</a>
11 <a href="/blog">Blog</a>
12 <a href="/careers">Carrières</a>
13 </nav>
14 <main>{children}</main>
15 <footer className="marketing-footer">
16 <p>© 2150 Quantum Voyages. Tous droits réservés.</p>
17 </footer>
18 </div>
19 );
20}1// app/(shop)/layout.tsx - Mise en page pour les pages de la boutique
2export default function ShopLayout({
3 children,
4}: {
5 children: React.ReactNode;
6}) {
7 return (
8 <div className="shop-layout">
9 <header className="shop-header">
10 <h1>Boutique Quantum Voyages</h1>
11 <nav className="shop-nav">
12 <a href="/products">Produits</a>
13 <a href="/categories">Catégories</a>
14 <a href="/cart">Panier</a>
15 </nav>
16 </header>
17 <main>{children}</main>
18 <aside className="shop-sidebar">
19 <div className="popular-products">
20 <h3>Produits populaires</h3>
21 {/* Liste des produits populaires */}
22 </div>
23 </aside>
24 </div>
25 );
26}3. Diviser l'application en sections
Les route groups sont particulièrement utiles dans les applications multi-sections, comme une application avec une page d'accueil publique, un panneau d'administration et un tableau de bord utilisateur :
1app/
2 ├── (public)/ # Partie publique du site
3 │ ├── page.tsx # Accueil (/)
4 │ ├── about/ # /about
5 │ ├── blog/ # /blog
6 │ │ └── [slug]/ # /blog/:slug
7 │ └── layout.tsx # Mise en page publique
8 │
9 ├── (admin)/ # Panneau d'administration
10 │ ├── admin/ # /admin (note : le répertoire admin/ est nécessaire pour conserver l'URL)
11 │ │ ├── page.tsx # /admin
12 │ │ ├── users/ # /admin/users
13 │ │ └── settings/ # /admin/settings
14 │ └── layout.tsx # Mise en page admin
15 │
16 ├── (dashboard)/ # Tableau de bord utilisateur
17 │ ├── dashboard/ # /dashboard
18 │ │ ├── page.tsx # /dashboard
19 │ │ ├── profile/ # /dashboard/profile
20 │ │ └── settings/ # /dashboard/settings
21 │ └── layout.tsx # Mise en page du tableau de bord
22 │
23 └── layout.tsx # Mise en page principale (partagée par toutes les sections)Dans cet exemple, l'application est divisée en trois sections principales, chacune avec sa propre mise en page, mais toutes partageant une mise en page principale commune.
Exemple Quantum Voyages
Implémentons un système de route groups pour notre application spatiale Quantum Voyages :
1app/
2 ├── (marketing)/ # Pages marketing
3 │ ├── page.tsx # Accueil (/)
4 │ ├── about/ # /about
5 │ ├── destinations/ # /destinations
6 │ │ └── [id]/ # /destinations/:id
7 │ └── layout.tsx # Mise en page marketing
8 │
9 ├── (customer)/ # Pages pour les clients connectés
10 │ ├── dashboard/ # /dashboard
11 │ ├── bookings/ # /bookings
12 │ │ └── [id]/ # /bookings/:id
13 │ ├── account/ # /account
14 │ └── layout.tsx # Mise en page client
15 │
16 ├── (admin)/ # Panneau d'administration
17 │ ├── admin/ # /admin
18 │ │ ├── voyages/ # /admin/voyages
19 │ │ ├── customers/ # /admin/customers
20 │ │ └── analytics/ # /admin/analytics
21 │ └── layout.tsx # Mise en page admin
22 │
23 └── layout.tsx # Mise en page principaleCode des mises en page :
1// app/layout.tsx - Mise en page principale
2import { Inter } from 'next/font/google';
3import './globals.css';
4
5const inter = Inter({ subsets: ['latin'] });
6
7export const metadata = {
8 title: 'Quantum Voyages - Voyages spatiaux depuis Metropolis Quantum',
9 description: 'Découvre le cosmos avec le guide de Metropolis Quantum',
10};
11
12export default function RootLayout({
13 children,
14}: {
15 children: React.ReactNode;
16}) {
17 return (
18 <html lang="fr">
19 <body className={inter.className}>
20 {children}
21 </body>
22 </html>
23 );
24}1// app/(marketing)/layout.tsx - Mise en page marketing
2import Header from '@/components/marketing/Header';
3import Footer from '@/components/marketing/Footer';
4
5export default function MarketingLayout({
6 children,
7}: {
8 children: React.ReactNode;
9}) {
10 return (
11 <>
12 <Header />
13 <main className="min-h-screen pt-16 pb-20">
14 {children}
15 </main>
16 <Footer />
17 </>
18 );
19}1// app/(customer)/layout.tsx - Mise en page pour les clients connectés
2import CustomerHeader from '@/components/customer/Header';
3import CustomerSidebar from '@/components/customer/Sidebar';
4import { checkAuth } from '@/lib/auth';
5import { redirect } from 'next/navigation';
6
7export default async function CustomerLayout({
8 children,
9}: {
10 children: React.ReactNode;
11}) {
12 // Vérifie si l'utilisateur est connecté
13 const user = await checkAuth();
14 if (!user) {
15 // Le layout est un Server Component : il n'y a pas d'objet window ici. proxy.ts peut ajouter l'adresse de retour.
16 redirect('/login');
17 }
18
19 return (
20 <>
21 <CustomerHeader user={user} />
22 <div className="flex min-h-screen pt-16">
23 <CustomerSidebar />
24 <main className="flex-1 p-6 bg-gray-50">
25 {children}
26 </main>
27 </div>
28 </>
29 );
30}1// app/(admin)/layout.tsx - Mise en page admin
2import AdminHeader from '@/components/admin/Header';
3import AdminSidebar from '@/components/admin/Sidebar';
4import { checkAdminAuth } from '@/lib/auth';
5import { redirect } from 'next/navigation';
6
7export default async function AdminLayout({
8 children,
9}: {
10 children: React.ReactNode;
11}) {
12 // Vérifie si l'utilisateur est administrateur
13 const isAdmin = await checkAdminAuth();
14 if (!isAdmin) {
15 redirect('/admin-login');
16 }
17
18 return (
19 <div className="admin-layout">
20 <AdminHeader />
21 <div className="flex min-h-screen pt-16">
22 <AdminSidebar />
23 <main className="flex-1 p-6 bg-gray-100">
24 {children}
25 </main>
26 </div>
27 </div>
28 );
29}Des groupes uniquement pour ranger les fichiers
Un groupe de routes n'a pas besoin de son propre layout.tsx. Tu peux l'utiliser uniquement pour ranger les fichiers, et les URL restent les mêmes :
1app/
2 ├── (onboarding)/welcome/
3 │ └── page.tsx # /welcome
4 └── (payments)/cart/
5 └── page.tsx # /cartSéparer les mises en page et les chemins d'URL
Les route groups sont particulièrement utiles lorsqu'on veut partager une mise en page entre des routes précises qui ne sont pas forcément proches les unes des autres dans la hiérarchie des URL :
1app/
2 ├── (auth)/
3 │ ├── login/ # /login
4 │ │ └── page.tsx
5 │ ├── register/ # /register
6 │ │ └── page.tsx
7 │ └── layout.tsx # Mise en page partagée uniquement pour /login et /register
8 │
9 ├── account/ # /account (n'utilise pas la mise en page (auth))
10 │ └── page.tsx
11 │
12 └── layout.tsx # Mise en page principale pour toutes les routesPrivate Folders (_nomDuDossier)
Next.js 16 prend aussi en charge la convention des private folders, qui sont marqués par un underscore (_) au début du nom. Ces dossiers ne sont pas inclus dans les chemins d'URL mais peuvent contenir du code partagé par plusieurs routes.
Structure et syntaxe des private folders
1app/
2 ├── _components/ # Dossier privé pour les composants partagés
3 │ ├── Button.tsx # Composant Button
4 │ ├── Card.tsx # Composant Card
5 │ └── SearchForm.tsx # Composant formulaire de recherche
6 │
7 ├── _lib/ # Dossier privé pour les fonctions partagées
8 │ ├── api.ts # Fonctions d'API
9 │ └── utils.ts # Fonctions utilitaires
10 │
11 ├── destinations/ # Route publique
12 │ └── page.tsx # /destinations
13 │
14 └── page.tsx # Accueil (/)Dans cet exemple, les répertoires _components et _lib sont privés et ne génèrent aucun chemin d'URL. Ils servent à stocker des composants et des fonctions partagés qui peuvent être importés par d'autres composants.
Différence entre private folders et route groups
Les private folders et les route groups se ressemblent mais ont des usages différents :
- Les private folders (
_nomDuDossier) servent à organiser du code qui ne doit pas être directement accessible via une URL. - Les route groups (
(nomDuDossier)) servent à regrouper des routes sans affecter les chemins d'URL, mais ils peuvent influencer le comportement des mises en page.
Exemple d'utilisation des private folders dans l'application Quantum Voyages
1app/
2 ├── _components/ # Composants d'UI partagés
3 │ ├── ui/ # Composants d'UI de base
4 │ │ ├── Button.tsx
5 │ │ ├── Card.tsx
6 │ │ └── Input.tsx
7 │ │
8 │ ├── marketing/ # Composants pour les pages marketing
9 │ │ ├── HeroSection.tsx
10 │ │ └── TestimonialCard.tsx
11 │ │
12 │ └── bookings/ # Composants pour le système de réservation
13 │ ├── BookingForm.tsx
14 │ └── PlanetSelector.tsx
15 │
16 ├── _lib/ # Fonctions et utilitaires partagés
17 │ ├── api/ # Fonctions de communication avec l'API
18 │ │ ├── destinations.ts
19 │ │ └── bookings.ts
20 │ │
21 │ ├── hooks/ # Hooks React personnalisés
22 │ │ ├── useBooking.ts
23 │ │ └── useAuth.ts
24 │ │
25 │ └── utils/ # Fonctions d'aide
26 │ ├── dates.ts
27 │ └── validation.ts
28 │
29 ├── _data/ # Données statiques (tu peux aussi utiliser /public)
30 │ ├── destinations.json
31 │ └── testimonials.json
32 │
33 ├── (marketing)/ # Groupe pour les pages marketing
34 │ ├── page.tsx # Accueil (/)
35 │ ├── about/ # /about
36 │ └── destinations/ # /destinations
37 │
38 └── (customer)/ # Groupe pour les pages client
39 ├── dashboard/ # /dashboard
40 └── bookings/ # /bookingsExemple de code utilisant des private folders :
1// app/_components/ui/Button.tsx
2import { cva, type VariantProps } from 'class-variance-authority';
3import { cn } from '@/app/_lib/utils/cn';
4
5const buttonVariants = cva(
6 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
7 {
8 variants: {
9 variant: {
10 default: 'bg-primary text-primary-foreground hover:bg-primary/90',
11 destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
12 outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
13 secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
14 ghost: 'hover:bg-accent hover:text-accent-foreground',
15 link: 'text-primary underline-offset-4 hover:underline',
16 },
17 size: {
18 default: 'h-10 px-4 py-2',
19 sm: 'h-9 rounded-md px-3',
20 lg: 'h-11 rounded-md px-8',
21 icon: 'h-10 w-10',
22 },
23 },
24 defaultVariants: {
25 variant: 'default',
26 size: 'default',
27 },
28 }
29);
30
31export interface ButtonProps
32 extends React.ButtonHTMLAttributes<HTMLButtonElement>,
33 VariantProps<typeof buttonVariants> {
34 asChild?: boolean;
35}
36
37export function Button({
38 className,
39 variant,
40 size,
41 asChild = false,
42 ...props
43}: ButtonProps) {
44 return (
45 <button
46 className={cn(buttonVariants({ variant, size, className }))}
47 {...props}
48 />
49 );
50}1// app/(marketing)/destinations/page.tsx
2import { getDestinations } from '@/app/_lib/api/destinations';
3import DestinationCard from '@/app/_components/marketing/DestinationCard';
4import { HeroSection } from '@/app/_components/marketing/HeroSection';
5
6export default async function DestinationsPage() {
7 const destinations = await getDestinations();
8
9 return (
10 <div className="container mx-auto px-4 py-12">
11 <HeroSection
12 title="Découvre le cosmos avec Quantum Voyages"
13 subtitle="Parcours nos destinations spatiales et planifie ton aventure"
14 image="/images/space-banner.jpg"
15 />
16
17 <section className="my-12">
18 <h2 className="text-3xl font-bold mb-8">Destinations populaires</h2>
19
20 <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
21 {destinations.map((destination) => (
22 <DestinationCard
23 key={destination.id}
24 destination={destination}
25 />
26 ))}
27 </div>
28 </section>
29 </div>
30 );
31}Fichiers de route (route.js)
Next.js 16 permet de créer des points d'API à l'aide de fichiers route.js (ou route.ts). Ces fichiers peuvent eux aussi profiter des techniques d'organisation comme les route groups et les private folders.
Organisation des points d'API
1app/
2 ├── api/ # Section API principale
3 │ ├── (public)/ # Points d'accès publics
4 │ │ ├── destinations/
5 │ │ │ └── route.ts # GET /api/destinations
6 │ │ └── newsletter/
7 │ │ └── route.ts # POST /api/newsletter
8 │ │
9 │ ├── (protected)/ # Points d'accès protégés (nécessitent une autorisation)
10 │ │ ├── bookings/
11 │ │ │ ├── route.ts # GET, POST /api/bookings
12 │ │ │ └── [id]/
13 │ │ │ └── route.ts # GET, PUT, DELETE /api/bookings/:id
14 │ │ └── user/
15 │ │ └── route.ts # GET /api/user
16 │ │
17 │ └── _middleware/ # Middleware pour l'API (dossier privé)
18 │ ├── auth.ts # Middleware d'authentification
19 │ └── rateLimit.ts # Middleware de limitation du débit
20 │
21 └── page.tsx # Accueil (/)Exemple d'implémentation d'un point d'API protégé :
1// app/api/(protected)/bookings/route.ts
2import { NextResponse } from 'next/server';
3import { verifyAuth } from '@/app/api/_middleware/auth';
4import { rateLimit } from '@/app/api/_middleware/rateLimit';
5
6export async function GET(request: Request) {
7 // Vérifie l'authentification
8 const authResult = await verifyAuth(request);
9 if (!authResult.isAuthenticated) {
10 return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
11 }
12
13 // Limitation du débit
14 const rateLimitResult = await rateLimit(request);
15 if (!rateLimitResult.success) {
16 return NextResponse.json({ error: 'Too many requests' }, { status: 429 });
17 }
18
19 // Récupère les réservations de l'utilisateur connecté
20 const userId = authResult.user.id;
21 const bookings = await getBookingsForUser(userId);
22
23 return NextResponse.json({ bookings });
24}
25
26export async function POST(request: Request) {
27 // Vérifie l'authentification
28 const authResult = await verifyAuth(request);
29 if (!authResult.isAuthenticated) {
30 return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
31 }
32
33 // Parse les données de la requête
34 const data = await request.json();
35
36 // Validation des données
37 const validationResult = validateBookingData(data);
38 if (!validationResult.success) {
39 return NextResponse.json({ error: validationResult.errors }, { status: 400 });
40 }
41
42 // Crée la réservation
43 const userId = authResult.user.id;
44 const booking = await createBooking(userId, data);
45
46 return NextResponse.json({ booking }, { status: 201 });
47}Bonnes pratiques pour l'organisation des routes dans les grandes applications
À Metropolis Quantum, une planification détaillée est essentielle au bon fonctionnement de la ville. De même, dans les grandes applications Next.js 16, il est important de suivre des règles et des modèles précis pour l'organisation des routes :
1. Utilise une structure claire et cohérente
Maintiens une structure de répertoires et un nommage cohérents dans toute l'application :
1app/
2 ├── (sections)/ # Groupes pour les sections principales
3 │ ├── (marketing)/ # Section publique
4 │ ├── (app)/ # Application principale
5 │ └── (admin)/ # Panneau d'administration
6 │
7 ├── _lib/ # Code partagé
8 │ ├── components/ # Composants partagés
9 │ ├── hooks/ # Hooks React
10 │ └── utils/ # Fonctions utilitaires
11 │
12 ├── api/ # Points d'API
13 │ ├── (public)/
14 │ └── (protected)/
15 │
16 └── layout.tsx # Mise en page principale2. Partage les composants intelligemment
Utilise les private folders pour stocker les composants partagés et place-les au bon niveau de la hiérarchie :
- Composants utilisés dans toute l'application :
app/_components/ - Composants spécifiques à une section :
app/(section)/_components/
3. Applique la séparation des responsabilités
page.js- Rendu de la page et récupération des donnéeslayout.js- Mise en page de l'UI et logique de navigationloading.js- États de chargementerror.js- Gestion des erreursnot-found.js- Gestion des ressources manquantes
4. Utilise des alias d'import dans tsconfig.json/jsconfig.json
Configure des alias d'import pour simplifier les chemins :
1{
2 "compilerOptions": {
3 "baseUrl": ".",
4 "paths": {
5 "@/*": ["./*"],
6 "@components/*": ["./app/_components/*"],
7 "@lib/*": ["./app/_lib/*"],
8 "@hooks/*": ["./app/_lib/hooks/*"],
9 "@utils/*": ["./app/_lib/utils/*"]
10 }
11 }
12}Cela te permet d'importer les composants de façon plus lisible :
1// Au lieu de :
2import { Button } from '../../../_components/ui/Button';
3
4// Tu peux utiliser :
5import { Button } from '@components/ui/Button';5. Implémentation pour l'application Quantum Voyages
Exemple de structure complète pour une grande application Quantum Voyages :
1app/
2 ├── (public)/ # Partie publique du site
3 │ ├── _components/ # Composants spécifiques à la section publique
4 │ ├── page.tsx # Accueil (/)
5 │ ├── about/ # /about
6 │ ├── destinations/ # /destinations
7 │ │ ├── page.tsx # Liste des destinations
8 │ │ └── [id]/ # /destinations/:id
9 │ │ └── page.tsx # Détails de la destination
10 │ ├── contact/ # /contact
11 │ └── layout.tsx # Mise en page publique
12 │
13 ├── (auth)/ # Section d'authentification
14 │ ├── _components/ # Composants d'authentification
15 │ ├── _lib/ # Logique d'authentification
16 │ ├── login/ # /login
17 │ ├── register/ # /register
18 │ ├── forgot-password/ # /forgot-password
19 │ └── layout.tsx # Mise en page d'authentification
20 │
21 ├── (app)/ # Application principale (pour les utilisateurs connectés)
22 │ ├── _components/ # Composants de l'application
23 │ ├── dashboard/ # /dashboard
24 │ ├── bookings/ # /bookings
25 │ │ ├── page.tsx # Liste des réservations
26 │ │ ├── new/ # /bookings/new
27 │ │ └── [id]/ # /bookings/:id
28 │ │ ├── page.tsx # Détails de la réservation
29 │ │ └── edit/ # /bookings/:id/edit
30 │ ├── account/ # /account
31 │ │ ├── page.tsx # Aperçu du compte
32 │ │ ├── profile/ # /account/profile
33 │ │ └── preferences/ # /account/preferences
34 │ └── layout.tsx # Mise en page de l'application
35 │
36 ├── (admin)/ # Panneau d'administration
37 │ ├── _components/ # Composants admin
38 │ ├── admin/ # /admin (dossier nécessaire pour l'URL)
39 │ │ ├── page.tsx # Tableau de bord admin
40 │ │ ├── users/ # /admin/users
41 │ │ ├── destinations/ # /admin/destinations
42 │ │ └── bookings/ # /admin/bookings
43 │ └── layout.tsx # Mise en page admin
44 │
45 ├── _components/ # Composants partagés
46 │ ├── ui/ # Composants d'UI de base
47 │ └── forms/ # Composants de formulaire
48 │
49 ├── _lib/ # Fonctions partagées
50 │ ├── api/ # Fonctions d'API
51 │ ├── hooks/ # Hooks personnalisés
52 │ └── utils/ # Fonctions utilitaires
53 │
54 ├── api/ # Points d'API
55 │ ├── (public)/ # API publique
56 │ └── (protected)/ # API protégée
57 │
58 └── layout.tsx # Mise en page principaleRésumé
Le regroupement et l'organisation des routes dans Next.js 16 offrent de nombreuses possibilités pour structurer les applications de façon logique et claire, à l'image de la planification urbaine de Metropolis Quantum qui organise l'espace urbain pour une efficacité et une fonctionnalité maximales.
Concepts clés :
Les route groups (
(nomDuGroupe)) - permettent de regrouper logiquement les routes sans affecter les chemins d'URL, ce qui est particulièrement utile pour diviser les différentes sections de l'application et implémenter des mises en page spécifiques.Les private folders (
_nomDuDossier) - permettent d'organiser le code, les composants partagés et les fonctions qui ne sont pas directement accessibles via une URL.Les mises en page hiérarchiques - la possibilité de définir des mises en page précises pour différents route groups, garantissant une expérience utilisateur cohérente au sein de chaque section.
L'organisation de l'API - l'application des mêmes principes d'organisation aux points d'API.
Grâce à ces techniques, tu peux créer des applications qui sont :
- Plus transparentes et plus faciles à maintenir
- Flexibles en matière de navigation et d'expérience utilisateur
- Bien organisées pour les équipes de développement
- Évolutives pour les applications qui grandissent
Dans le prochain chapitre, nous découvrirons comment gérer des scénarios de navigation plus complexes, comme les routes imbriquées et les paramètres catch-all, qui permettent de créer des systèmes de navigation avancés et flexibles dans les applications Next.js 16.
Tu as repéré une erreur dans cette leçon ?