Pages et Layouts

Nous recommandons de lire les pages Fondamentaux du routage et Définir des routes avant de continuer.

Le routeur App dans Next.js 13 a introduit de nouvelles conventions de fichiers pour créer facilement des pages, des mises en page partagées et des modèles. Cette page vous guidera sur la façon d'utiliser ces fichiers spéciaux dans votre application Next.js.

Pages

Une page est une interface utilisateur unique à une route. Vous pouvez définir des pages en exportant un composant depuis un fichier page.js. Utilisez des dossiers imbriqués pour définir une route et un fichier page.js pour rendre la route accessible publiquement.

Créez votre première page en ajoutant un fichier page.js dans le répertoire app :

// `app/page.tsx` est l'interface utilisateur pour l'URL `/`
export default function Page() {
  return <h1>Bonjour, page d'accueil !</h1>
}

// `app/page.js` est l'interface utilisateur pour l'URL `/`
export default function Page() {
  return <h1>Bonjour, page d'accueil !</h1>
}

// `app/dashboard/page.tsx` est l'interface utilisateur pour l'URL `/dashboard`
export default function Page() {
  return <h1>Bonjour, page Tableau de bord !</h1>
}

// `app/dashboard/page.js` est l'interface utilisateur pour l'URL `/dashboard`
export default function Page() {
  return <h1>Bonjour, page Tableau de bord !</h1>
}

Bon à savoir :

Une page est toujours la feuille du sous-arbre de route.

Les extensions de fichier .js, .jsx ou .tsx peuvent être utilisées pour les pages.

Un fichier page.js est requis pour rendre un segment de route accessible publiquement.

Les pages sont par défaut des composants serveur mais peuvent être configurées comme composants client.

Les pages peuvent récupérer des données. Consultez la section Récupération de données pour plus d'informations.

Layouts

Un layout est une interface utilisateur partagée entre plusieurs pages. Lors de la navigation, les layouts préservent l'état, restent interactifs et ne sont pas re-rendus. Les layouts peuvent également être imbriqués.

Vous pouvez définir un layout en exportant par défaut un composant React depuis un fichier layout.js. Le composant doit accepter une prop children qui sera remplie avec un layout enfant (s'il existe) ou une page enfant lors du rendu.

export default function DashboardLayout({
  children, // sera une page ou un layout imbriqué
}: {
  children: React.ReactNode
}) {
  return (
    <section>
      {/* Inclure ici une interface partagée comme un en-tête ou une barre latérale */}
      <nav></nav>

      {children}
    </section>
  )
}

export default function DashboardLayout({
  children, // sera une page ou un layout imbriqué
}) {
  return (
    <section>
      {/* Inclure ici une interface partagée comme un en-tête ou une barre latérale */}
      <nav></nav>

      {children}
    </section>
  )
}

Bon à savoir :

Le layout le plus haut est appelé le Root Layout. Ce layout requis est partagé entre toutes les pages d'une application. Les root layouts doivent contenir les balises html et body.

Tout segment de route peut optionnellement définir son propre Layout. Ces layouts seront partagés entre toutes les pages de ce segment.

Les layouts dans une route sont imbriqués par défaut. Chaque layout parent enveloppe les layouts enfants en dessous en utilisant la prop React children.

Vous pouvez utiliser des Groupes de routes pour inclure ou exclure des segments de route spécifiques des layouts partagés.

Les layouts sont par défaut des composants serveur mais peuvent être configurés comme composants client.

Les layouts peuvent récupérer des données. Consultez la section Récupération de données pour plus d'informations.

Il n'est pas possible de passer des données entre un layout parent et ses enfants. Cependant, vous pouvez récupérer les mêmes données dans une route plusieurs fois, et React dédupliquera automatiquement les requêtes sans affecter les performances.

Les layouts n'ont pas accès aux segments de route en dessous d'eux. Pour accéder à tous les segments de route, vous pouvez utiliser useSelectedLayoutSegment ou useSelectedLayoutSegments dans un composant client.

Les extensions de fichier .js, .jsx ou .tsx peuvent être utilisées pour les layouts.

Un fichier layout.js et page.js peut être défini dans le même dossier. Le layout enveloppera la page.

Root Layout (Requis)

Le root layout est défini au niveau supérieur du répertoire app et s'applique à toutes les routes. Ce layout vous permet de modifier le HTML initial retourné par le serveur.

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="fr">
      <body>{children}</body>
    </html>
  )
}

export default function RootLayout({ children }) {
  return (
    <html lang="fr">
      <body>{children}</body>
    </html>
  )
}

Bon à savoir :

Le répertoire app doit inclure un root layout.

Le root layout doit définir les balises <html> et <body> car Next.js ne les crée pas automatiquement.

Vous pouvez utiliser le support SEO intégré pour gérer les éléments HTML <head>, par exemple l'élément <title>.

Vous pouvez utiliser des groupes de routes pour créer plusieurs root layouts. Voir un exemple ici.

Le root layout est par défaut un composant serveur et ne peut pas être configuré comme composant client.

Migration depuis le répertoire pages : Le root layout remplace les fichiers _app.js et _document.js. Voir le guide de migration.

Imbrication des Layouts

Les layouts définis à l'intérieur d'un dossier (par exemple app/dashboard/layout.js) s'appliquent à des segments de route spécifiques (par exemple acme.com/dashboard) et sont rendus lorsque ces segments sont actifs. Par défaut, les layouts dans la hiérarchie de fichiers sont imbriqués, ce qui signifie qu'ils enveloppent les layouts enfants via leur prop children.

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return <section>{children}</section>
}

export default function DashboardLayout({ children }) {
  return <section>{children}</section>
}

Bon à savoir :

Seul le root layout peut contenir les balises <html> et <body>.

Si vous combinez les deux layouts ci-dessus, le root layout (app/layout.js) envelopperait le layout du tableau de bord (app/dashboard/layout.js), qui envelopperait les segments de route à l'intérieur de app/dashboard/*.

Les deux layouts seraient imbriqués comme ceci :

Vous pouvez utiliser des Groupes de routes pour inclure ou exclure des segments de route spécifiques des layouts partagés.

Templates

Les templates sont similaires aux layouts en ce qu'ils enveloppent chaque layout enfant ou page. Contrairement aux layouts qui persistent entre les routes et maintiennent l'état, les templates créent une nouvelle instance pour chacun de leurs enfants lors de la navigation. Cela signifie que lorsqu'un utilisateur navigue entre des routes partageant un template, une nouvelle instance du composant est montée, les éléments DOM sont recréés, l'état n'est pas préservé et les effets sont resynchronisés.

Il peut y avoir des cas où vous avez besoin de ces comportements spécifiques, et les templates seraient une option plus appropriée que les layouts. Par exemple :

Fonctionnalités reposant sur useEffect (par exemple journalisation des vues de page) et useState (par exemple un formulaire de feedback par page).
Pour changer le comportement par défaut du framework. Par exemple, les Suspense Boundaries à l'intérieur des layouts ne montrent le fallback que la première fois que le Layout est chargé et pas lors du changement de page. Pour les templates, le fallback est montré à chaque navigation.

Un template peut être défini en exportant par défaut un composant React depuis un fichier template.js. Le composant doit accepter une prop children.

export default function Template({ children }: { children: React.ReactNode }) {
  return <div>{children}</div>
}

export default function Template({ children }) {
  return <div>{children}</div>
}

En termes d'imbrication, template.js est rendu entre un layout et ses enfants. Voici un rendu simplifié :

Output

<Layout>
  {/* Notez que le template a une clé unique. */}
  <Template key={routeParam}>{children}</Template>
</Layout>

Modification de `<head>`

Dans le répertoire app, vous pouvez modifier les éléments HTML <head> tels que title et meta en utilisant le support SEO intégré.

Les métadonnées peuvent être définies en exportant un objet metadata ou une fonction generateMetadata dans un fichier layout.js ou page.js.

import { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'Next.js',
}

export default function Page() {
  return '...'
}

export const metadata = {
  title: 'Next.js',
}

export default function Page() {
  return '...'
}

Bon à savoir : Vous ne devriez pas ajouter manuellement des balises <head> comme <title> et <meta> aux root layouts. À la place, vous devriez utiliser l'API Metadata qui gère automatiquement les exigences avancées comme le streaming et la déduplication des éléments <head>.

Apprenez-en plus sur les options de métadonnées disponibles dans la référence API.