layout.js

Un layout est une interface utilisateur partagée entre plusieurs routes.

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

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

Un root layout (layout racine) est le layout le plus haut dans le répertoire racine app. Il est utilisé pour définir les balises <html> et <body> ainsi que d'autres éléments d'interface partagés globalement.

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

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

Props

`children` (requis)

Les composants Layout doivent accepter et utiliser une prop children. Lors du rendu, children sera rempli avec les segments de route que le layout englobe. Il s'agira principalement du composant d'un Layout enfant (s'il existe) ou d'une Page, mais pourrait aussi être d'autres fichiers spéciaux comme Loading ou Error le cas échéant.

`params` (optionnel)

L'objet des paramètres de route dynamiques depuis le segment racine jusqu'à ce layout.

Exemple	URL	`params`
`app/dashboard/[team]/layout.js`	`/dashboard/1`	`{ team: '1' }`
`app/shop/[tag]/[item]/layout.js`	`/shop/1/2`	`{ tag: '1', item: '2' }`
`app/blog/[...slug]/layout.js`	`/blog/1/2`	`{ slug: ['1', '2'] }`

Par exemple :

export default function ShopLayout({
  children,
  params,
}: {
  children: React.ReactNode
  params: {
    tag: string
    item: string
  }
}) {
  // URL -> /shop/shoes/nike-air-max-97
  // `params` -> { tag: 'shoes', item: 'nike-air-max-97' }
  return <section>{children}</section>
}

export default function ShopLayout({ children, params }) {
  // URL -> /shop/shoes/nike-air-max-97
  // `params` -> { tag: 'shoes', item: 'nike-air-max-97' }
  return <section>{children}</section>
}

Bon à savoir

Les layouts ne reçoivent pas `searchParams`

Contrairement aux Pages, les composants Layout ne reçoivent pas la prop searchParams. Cela est dû au fait qu'un layout partagé n'est pas re-rendu pendant la navigation, ce qui pourrait entraîner des searchParams obsolètes entre les navigations.

Lors de l'utilisation de la navigation côté client, Next.js ne rend automatiquement que la partie de la page située sous le layout commun entre deux routes.

Par exemple, dans la structure de répertoire suivante, dashboard/layout.tsx est le layout commun pour /dashboard/settings et /dashboard/analytics :

Structure de fichiers montrant un dossier dashboard contenant un fichier layout.tsx, ainsi que des dossiers settings et analytics avec leurs propres pages

Lors de la navigation de /dashboard/settings vers /dashboard/analytics, page.tsx dans /dashboard/analytics sera re-rendu côté serveur, tandis que dashboard/layout.tsx ne sera pas re-rendu car il s'agit d'une interface commune partagée entre les deux routes.

Cette optimisation de performance permet une navigation plus rapide entre les pages partageant un layout, car seules les opérations de récupération de données et de rendu pour la page doivent être exécutées, au lieu de l'ensemble de la route qui pourrait inclure des layouts partagés avec leurs propres données.

Comme dashboard/layout.tsx ne se re-rend pas, la prop searchParams dans le composant serveur du layout pourrait devenir obsolète après la navigation.

À la place, utilisez la prop searchParams de la Page ou le hook useSearchParams dans un composant client, qui est re-rendu côté client avec les derniers searchParams.

Layouts racines

Le répertoire app doit inclure un app/layout.js racine.
Le layout racine doit définir les balises <html> et <body>.
- Vous ne devriez pas ajouter manuellement des balises <head> comme <title> et <meta> aux layouts racines. Utilisez plutôt l'API Metadata qui gère automatiquement les besoins avancés comme le streaming et la déduplication des éléments <head>.
Vous pouvez utiliser des groupes de routes pour créer plusieurs layouts racines.
- Naviguer entre plusieurs layouts racines provoquera un rechargement complet de la page (par opposition à une navigation côté client). Par exemple, naviguer de /cart qui utilise app/(shop)/layout.js vers /blog qui utilise app/(marketing)/layout.js provoquera un rechargement complet. Cela s'applique uniquement aux multiples layouts racines.

Historique des versions

Version	Changements
`v13.0.0`	Introduction de `layout`.

Props

children (requis)

params (optionnel)