Layouts & Templates
Un squelette partagé par toutes tes pages. Comme un décor de théâtre qu'on ne change pas entre les scènes.
3.1Le layout racine
Le fichier app/layout.tsx est le layout racine de ton site. C'est le seul endroit où tu définis la balise <html> et <body>. Toutes tes pages passent par lui.
// app/layout.tsx
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="fr">
<body>
<header>
<nav>Mon super site</nav>
</header>
{children}
<footer>© 2026 - Tous droits réservés</footer>
</body>
</html>
)
}Le {children} c'est l'emplacement magique : Next.js y injecte le contenu de la page actuelle. Tu navigues de / à /blog ? Le header et le footer restent, seul le contenu central change.
3.2Layouts imbriqués
La force de Next.js, c'est que tu peux avoir des layouts à chaque niveau de ton arborescence. Par exemple, un layout spécial pour le dashboard avec une sidebar :
app/
├── layout.tsx # Layout global (header + footer)
├── page.tsx # Page d'accueil
└── dashboard/
├── layout.tsx # Layout dashboard (+ sidebar)
├── page.tsx # /dashboard
└── parametres/
└── page.tsx # /dashboard/parametres// app/dashboard/layout.tsx
export default function DashboardLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<div className="flex">
<aside>
<nav>
<a href="/dashboard">Accueil</a>
<a href="/dashboard/parametres">Paramètres</a>
</nav>
</aside>
<main>{children}</main>
</div>
)
}Résultat : quand tu es sur /dashboard/parametres, tu vois le layout racine (header + footer) ET le layout dashboard (sidebar). C'est comme des poupées russes : chaque layout englobe le suivant.
3.3loading.tsx : l'écran de chargement
Si une page met du temps à charger (données à récupérer, calculs...), tu peux afficher un écran de chargement automatiquement. Crée un fichier loading.tsx dans le même dossier :
// app/dashboard/loading.tsx
export default function Loading() {
return (
<div className="flex items-center justify-center min-h-screen">
<p>Chargement en cours... ⏳</p>
</div>
)
}Next.js affiche ce composant automatiquement pendant que la page se charge. Dès qu'elle est prête, il la remplace. L'utilisateur ne voit jamais un écran blanc. C'est la classe, non ?
3.4error.tsx : gérer les erreurs avec élégance
Les erreurs arrivent, c'est normal. Mais au lieu d'un écran blanc ou d'un message cryptique, tu peux afficher quelque chose de propre :
// app/dashboard/error.tsx
'use client'
export default function Error({
error,
reset,
}: {
error: Error
reset: () => void
}) {
return (
<div>
<h2>Oups, quelque chose s'est mal passé !</h2>
<p>{error.message}</p>
<button onClick={() => reset()}>
Réessayer
</button>
</div>
)
}3.5not-found.tsx : la page 404 personnalisée
Quand quelqu'un tape une URL qui n'existe pas, Next.js affiche une page 404 par défaut. Mais tu peux la personnaliser :
// app/not-found.tsx
export default function NotFound() {
return (
<main>
<h1>404 - Page introuvable</h1>
<p>Cette page n'existe pas. Mais toi, tu existes, et c'est déjà bien.</p>
<a href="/">Retour à l'accueil</a>
</main>
)
}3.6Récap : les fichiers spéciaux
Voici tous les fichiers que Next.js reconnaît automatiquement :
| Fichier | Rôle |
|---|---|
page.tsx | Le contenu de la page |
layout.tsx | Squelette partagé (persistant) |
loading.tsx | Écran de chargement |
error.tsx | Gestion des erreurs |
not-found.tsx | Page 404 |
template.tsx | Comme layout, mais re-rendu à chaque navigation |