Next.js 13 introduit l�App Router, une nouvelle architecture qui modernise le d�veloppement des applications React.
Cette nouvelle approche repose sur plusieurs concepts cl�s :
- React Server Components
- Streaming et Suspense
- Layouts imbriqu�s
- Routing bas� sur les dossiers
- Server Actions et API Routes
Dans ce guide, vous allez apprendre comment structurer une application Next.js moderne avec l�App Router.
Introduction � l'App Router
L�App Router remplace progressivement l�ancien Pages Router et apporte plusieurs avantages :
- rendu c�t� serveur par d�faut
- chargement progressif (streaming)
- layouts partag�s
- meilleures performances
- gestion simplifi�e du routing
Dans Next.js 13+, les pages sont plac�es dans le dossier :
app/Chaque dossier correspond � une route.
Structure des dossiers avec App Router
Voici une structure classique d�application Next.js 13+ :
app/
??? layout.tsx // Layout racine
??? page.tsx // Page d'accueil
??? loading.tsx // UI de chargement
??? error.tsx // UI d'erreur
??? not-found.tsx // Page 404
??? globals.css // Styles globaux
?
??? blog/
? ??? layout.tsx
? ??? page.tsx
? ??? loading.tsx
? ??? [slug]/
? ??? page.tsx
? ??? loading.tsx
?
??? dashboard/
? ??? (auth)/
? ? ??? login/
? ? ??? register/
? ??? settings/
?
??? api/
??? posts/
??? route.tsDans cette structure :
layout.tsxd�finit la structure communepage.tsxrepr�sente une page[slug]correspond � une route dynamique
Server Components par d�faut
Dans l�App Router, les composants sont Server Components par d�faut.
Cela signifie que le rendu se fait c�t� serveur, ce qui am�liore :
- les performances
- le SEO
- la s�curit�
Exemple :
// app/blog/page.tsx
import { Metadata } from "next";
async function getPosts() {
const res = await fetch("https://api.example.com/posts", {
next: { revalidate: 3600 }
});
if (!res.ok) {
throw new Error("Failed to fetch posts");
}
return res.json();
}
export const metadata: Metadata = {
title: "Blog - Mon Site",
description: "Articles sur le d�veloppement web"
};
export default async function BlogPage() {
const posts = await getPosts();
return (
<div>
<h1>Blog</h1>
<div className="grid gap-4">
{posts.map(post => (
<article key={post.id}>
<h2>{post.title}</h2>
<p>{post.excerpt}</p>
</article>
))}
</div>
</div>
);
}Layouts imbriqu�s
L�un des avantages majeurs de l�App Router est la possibilit� de cr�er des layouts imbriqu�s.
Layout global
// app/layout.tsx
import "./globals.css";
export default function RootLayout({
children
}: {
children: React.ReactNode
}) {
return (
<html lang="fr">
<body>
<header>
Navigation globale
</header>
<main>{children}</main>
<footer>
Footer global
</footer>
</body>
</html>
);
}Layout sp�cifique
// app/blog/layout.tsx
export default function BlogLayout({
children
}: {
children: React.ReactNode
}) {
return (
<div className="container">
<aside>
Cat�gories
</aside>
<section>
{children}
</section>
</div>
);
}Chaque route peut donc avoir son propre layout.
Loading et Error UI
Next.js permet de g�rer facilement les �tats de chargement.
Loading
// app/blog/loading.tsx
export default function Loading() {
return (
<div className="animate-pulse">
Chargement des articles...
</div>
);
}Gestion des erreurs
// app/blog/error.tsx
"use client";
export default function Error({
error,
reset
}: {
error: Error;
reset: () => void;
}) {
return (
<div>
<h2>Une erreur est survenue</h2>
<button onClick={reset}>
R�essayer
</button>
</div>
);
}Streaming et Suspense
Next.js 13 permet de charger les composants progressivement.
Cela am�liore l�exp�rience utilisateur.
import { Suspense } from "react";
function Loading() {
return <p>Chargement...</p>;
}
export default function Page() {
return (
<div>
<h1>Blog</h1>
<Suspense fallback={<Loading />}>
<SlowComponent />
</Suspense>
</div>
);
}M�tadonn�es dynamiques
Next.js permet de g�n�rer des m�tadonn�es SEO dynamiques.
export async function generateMetadata({ params }) {
const post = await getPost(params.slug);
return {
title: post.title,
description: post.excerpt,
};
}Ces m�tadonn�es sont utilis�es pour :
- SEO
- Open Graph
- Twitter cards
API Routes avec App Router
Les routes API sont plac�es dans :
app/api/Exemple :
// app/api/posts/route.ts
import { NextResponse } from "next/server";
export async function GET() {
return NextResponse.json({
posts: []
});
}Client Components
Pour utiliser les hooks React (useState, useEffect), il faut d�clarer un Client Component.
"use client";
import { useState } from "react";
export default function Counter() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
{count}
</button>
);
}Middleware et redirections
Next.js permet d�intercepter les requ�tes avec un middleware.
// middleware.ts
import { NextResponse } from "next/server";
export function middleware(request) {
if (request.nextUrl.pathname === "/old-blog") {
return NextResponse.redirect(
new URL("/blog", request.url)
);
}
return NextResponse.next();
}Les middleware sont utiles pour :
- authentification
- redirections
- protection des routes
Bonnes pratiques avec Next.js 13+
Pour optimiser votre application :
- privil�gier les Server Components
- utiliser le cache Next.js
- optimiser les images avec
next/image - utiliser
next/linkpour la navigation - limiter les Client Components
Conclusion
Next.js 13 avec l�App Router apporte une nouvelle fa�on de d�velopper des applications React modernes.
Les principales am�liorations incluent :
- Server Components
- streaming
- layouts imbriqu�s
- routing simplifi�
- meilleures performances
Gr�ce � ces fonctionnalit�s, Next.js permet de cr�er des applications web rapides, SEO-friendly et scalables.