Return
Published on

Layouts et Templates dans Next.js 14

Comprendre et utiliser efficacement les layouts et templates dans un projet Next.js.

Dans Next.js 14, deux fichiers spéciaux permettent de créer des interfaces partagées entre les différentes routes de votre application : layout.tsx et template.tsx. Ces fichiers jouent un rôle crucial dans la structuration et l'optimisation. Examinons en détail leur fonctionnement et leurs différences.

Layouts dans Next.js 14

Qu'est-ce qu'un layout ?

Un layout dans Next.js 14 est une interface utilisateur partagée entre plusieurs pages ou sous-layouts. Il permet de maintenir une cohérence visuelle et structurelle à travers votre application.

bash
app
├── layout.tsx
└── page.tsx

1. Définition et emplacement

  • Le layout est défini dans un fichier layout.tsx (ou .js) dans le dossier app.
  • Le layout racine (root layout) est obligatoire et doit être placé directement dans le dossier app.

2. Rôle principal

  • Il définit la structure HTML de base de l'application.
  • Il permet de partager des éléments d'interface utilisateur entre plusieurs pages comme le header et le footer.
  • C'est l'endroit idéal pour inclure des styles globaux et des métadonnées.

3. Caractéristiques clés

  • Le contenu du layout persiste et ne se re-rend pas lors des navigations entre les pages.
  • Il peut être imbriqué dans des sous-dossiers pour créer des mises en page spécifiques à certaines sections de l'application.
  • Les layouts sont par défaut des Server Components, mais peuvent être convertis en Client Components si nécessaire.
  • Ils peuvent récupérer des données (voir notre article sur le fetching de données côté serveur).
  • Il n'est pas possible de passer des props directement aux layouts, car ils sont rendus dans un arbre de composants séparé.
bash
app
├── dashboard
│   ├── layout.tsx
│   └── page.tsx
├── layout.tsx
└── page.tsx

Exemple de root layout

tsx
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import RetroGrid from "@/components/magicui/retro-grid";
 
const inter = Inter({ subsets: ["latin"] });
 
export const metadata: Metadata = {
  title: "Benmehal Joris",
  description: "Next.js sandbox",
};
 
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        className={`relative w-full flex-col items-center justify-center overflow-hidden  ${inter.className}`}>
        <RetroGrid />
        <Header />
        <section className="container items-center justify-center flex h-screen mx-auto">
          {children}
        </section>
        <Footer />
      </body>
    </html>
  );
}

Exemple d'un layout pour une page spécifique

tsx
export default function DashboardLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <div
      className={`bg-gradient-to-r from-fuchsia-600 to-pink-600 text-white p-6 rounded-xl`}>
      {children}
      <p className="text-center font-semibold text-xl">
        Injected by Dashboard Layout
      </p>
    </div>
  );
}

Notez les différences avec le root layout :

  • Absence des balises <html> et <body>.
  • Pas de composants <Header />, <Footer /> et <RetroGrid />.

Ces éléments sont déjà hérités du root layout. Le contenu du DashboardLayout sera automatiquement injecté via l'expression JSX {children} du RootLayout.

Templates dans Next.js 14

bash
app
├── dashboard
│   ├── template.tsx
│   └── page.tsx
├── layout.tsx
└── page.tsx

Différences clés avec les layouts

  • Les templates créent une nouvelle instance pour chaque enfant lors de la navigation, entraînant des re-renders entre les routes qui partagent le même template.
  • Ils sont utiles pour des fonctionnalités qui nécessitent une réinitialisation à chaque navigation.

Cas d'utilisation des templates

  • Animations d'entrée/sortie de page
  • Réinitialisation de l'état des formulaires
  • Compteurs ou minuteurs qui doivent redémarrer
  • Layouts alternatifs pour des pages spécifiques
tsx
export default function Template({ children }: { children: React.ReactNode }) {
  return (
    <div className="max-w-4xl mx-auto p-4">
      {/* Une animation qui se déclenche à chaque navigation */}
      <div className="animate-fadeIn">
        {children}
      </div>
    </div>
  )
}

Conclusion

Les layouts et les templates dans Next.js 14 offrent des moyens puissants et flexibles de structurer votre application. Les layouts sont idéaux pour les éléments d'interface persistants, tandis que les templates conviennent aux composants qui doivent être réinitialisés ou animés à chaque navigation. En comprenant leurs différences et leurs cas d'utilisation, vous pouvez créer des applications Next.js plus performantes et mieux structurées.