Une fonctionnalité clé de Next.js introduite avec le App Router est le système de layouts. Mais êtes-vous sûr de savoir ce qu’est un “layout” ?
Dans Next.js, un layout est un composant React qui ne se remonte pas (“remount” en bon anglais) ou ne se rerend pas (“rerender”, toujours en bon anglais) lorsque la route change. On place dans un layout les éléments d’interface utilisateur communs qui doivent persister d’une page à l’autre, comme les en-têtes, les pieds de page et les menus.
Par défaut, les layouts dans Next.js sont gérés par le routeur, le fameux “App Router”. Il est interne au framework et n’est pas visible dans le code de l’application. On définit les layouts dans des fichiers dédiés (par exemple, app/layout.tsx pour le root layout) et Next.js s’occupe du reste.
Voici un exemple de layout simple avec un menu de navigation :
// app/layout.tsx
import Link from 'next/link';
// C'est un RSC (React Server Component) par défaut
// il n'y a pas de rendu côté client
export default function Layout({ children }) {
return (
<html>
<body>
<nav>
<Link href="/">Accueil</Link>
<Link href="/about">À propos</Link>
<Link href="/contact">Contact</Link>
</nav>
{children}
</body>
</html>
);
}
Le “root layout” est le seul obligatoire dans une application Next.js, car il définit les balises html et body nécessaires pour avoir un code HTML valide.
Par défaut, les layouts dans Next.js sont des server components. Cela signifie que vous ne pouvez pas accéder aux données comme l’URL actuelle ou les paramètres de route dynamiques, car ces données ne sont pas actualisées du point de vue du serveur lors d’une navigation côté client. Le layout perd en quelque sorte le fil de la navigation après l’affichage d’une première page.
Si vous avez besoin d’accéder à ces données, vous pouvez convertir le layout en un Client Component en ajoutant la directive "use client" :
"use client";
import { useParams } from 'next/navigation';
export default function Layout({ children }) {
const params = useParams();
// ...
}
Convertir un layout en composant client signifie qu’il va pouvoir utiliser le hook useParams et s’actualiser dans le navigateur en cas de changement de paramètre. L’état va persister, les effets useEffect ne sont donc pas rejoués, mais le layout sera rerendu.
Vous pouvez aussi créer un composant additionnel, et le placer dans le layout, si vous voulez que le layout lui-même reste un RSC.
Si le composant layout doit au contraire réinitialiser son état, vous pouvez utiliser un template au lieu d’un layout. Un template fonctionne de manière similaire à un layout, mais il est prévu pour se remonter (et se re-render) lors de la navigation, tout en restant un composant serveur.
Utilisez les templates lorsque vous avez besoin de créer un élément d’interface utilisateur partagé entre plusieurs pages mais que vous avez également besoin que cet élément s’actualise à chaque navigation.
Les layouts sont des server components par défaut, mais peuvent être transformés en client components lorsque l’accès à l’URL courante est requis.
Si un remount est nécessaire lors de la navigation (réinitialisation de l’état du composant), les templates peuvent être utilisés à la place des layouts.
La définition des layouts par Next.js n’est cependant pas la seule possible. Découvrez notre article sur formationnextjs.fr en savoir plus sur la différence entre les layouts dans Next.js, React et Astro.js.
Vous avez apprécié cette ressource ?
Découvrez toutes nos formations Next.js et Astro en présentiel ou en distanciel