NextJs : Comment créer un fichier de mise en page dédié pour la page d'index

Comprendre les mises en page Next.js et le regroupement d'itinéraires

Dans Next.js, le répertoire d'applications sert de base à la structure de routage et de mise en page de votre application. Dans ce répertoire, vous trouverez généralement les fichiers layout.jsx et page.jsx.

Mise en page racine (app/layout.jsx)
Objectif : le fichier layout.jsx à la racine du dossier de l'application fait office de mise en page racine. Cela signifie que toutes les pages (composants enfants) rendues dans cette mise en page s'appliqueront à tous les itinéraires, sauf indication contraire.

Mise en page dédiée pour la page d'accueil
Parfois, vous souhaiterez peut-être que la page racine ou la page d'index (/) ait sa propre mise en page spécifique, différente de la page globale. Voici comment y parvenir en utilisant le regroupement de routes :

*Solution : * Utilisation du regroupement d'itinéraires
Le regroupement d'itinéraires dans Next.js vous permet d'organiser vos itinéraires d'une manière qui n'affecte pas la structure de l'URL. Voici comment le mettre en œuvre :

Structure du répertoire :

app
├── layout.jsx         # Root layout for all pages
└── (home)
    ├── layout.jsx     # Dedicated layout for the root ('/') page
    ├── page.jsx       # The index or root page

*Détails de mise en œuvre : *
Dénomination du dossier : utilisez des parenthèses () autour du nom du dossier pour indiquer qu'il s'agit d'un regroupement d'itinéraires. Dans ce cas, (home) ne modifie pas le chemin de l'URL ; la page sera toujours accessible en '/'.
Déplacement de fichiers : déplacez page.jsx dans le dossier (accueil) et créez un layout.jsx dans ce dossier pour une mise en page spécifique pour cette page uniquement.

*En faisant ceci : *

La mise en page globale (app/layout.jsx) s'appliquera à toutes les autres routes à l'exception de '/'.
La mise en page dédiée (app/(home)/layout.jsx) s'appliquera uniquement au chemin racine, permettant un style ou un comportement unique uniquement pour la page d'accueil.

*Avantages : *

Modularité : vous pouvez adapter l'expérience de chaque itinéraire ou groupe d'itinéraires indépendamment.
SEO et UX : différentes mises en page peuvent optimiser le référencement ou améliorer l'expérience utilisateur sur des pages spécifiques.

*Considérations : *

Assurez-vous que la convention de dénomination des groupes de routes (utilisant des parenthèses) est strictement respectée pour éviter les problèmes de routage.

Cette approche permet non seulement de maintenir la structure de vos répertoires propre, mais permet également une conception flexible dans laquelle chaque segment de votre site peut avoir sa propre personnalité ou sa propre structure sans affecter le chemin de l'URL.

N'hésitez pas à adapter davantage cela en fonction de votre cas d'utilisation spécifique.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!