Gestion de plusieurs mises en page dans Next.js avec App Router et Route Groups-js tutoriel-php.cn

Gestion de plusieurs mises en page dans Next.js avec App Router et Route Groups

Mary-Kate Olsen

Libérer： 2025-01-17 02:34:11

original

565 Les gens l'ont consulté

Managing Multiple Layouts in Next.js with App Router and Route Groups

Dans Next.js 13, le App Router a été introduit avec plusieurs fonctionnalités intéressantes, telles que les mises en page, les limites d'erreur, les indicateurs de chargement, etc. Cependant, certains développeurs sont confrontés à des difficultés lorsqu’ils gèrent plusieurs mises en page au même niveau d’itinéraire. Ci-dessous, je vais vous montrer la meilleure façon de structurer et de maintenir des mises en page propres et pratiques pour de tels scénarios.

Étape 1 : Créer une disposition racine (facultatif)

Une disposition racine est utile pour définir des composants globaux ou des fournisseurs de contexte pour l'ensemble de votre application. Toutefois, si votre application ne nécessite pas de configuration globale, vous pouvez ignorer cette étape.

// app/layout.tsx

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html>
      <body>
        <RootProviders>
          {children}
        </RootProviders>
      </body>
    </html>
  );
}

Copier après la connexion

Étape 2 : Définir les présentations pour des groupes de routes spécifiques

Supposons que nous ayons besoin d'un en-tête et d'un pied de page pour les pages /home et /contact. Pour y parvenir, nous pouvons utiliser les groupes de routes Next.js.

Par exemple, nous allons créer un groupe de routes appelé (marketing) et y placer nos pages. Des pages telles que app/(marketing)/home/page.tsx et app/(marketing)/contact/page.tsx utiliseront la mise en page app/(marketing)/layout.tsx.

// app/(marketing)/layout.tsx

export default function MarketingLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <Providers>
      <Header />
      <main>{children}</main>
      <Footer />
    </Providers>
  );
}

Copier après la connexion

Étape 3 : Créer des présentations pour d'autres groupes de routes

De même, pour des pages comme /policy et /tos, nous pouvons créer un nouveau groupe de routes appelé (legal) et définir une mise en page spécifique pour celui-ci.

// app/(legal)/layout.tsx

export default function LegalLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <>
      <Header />
      <main className="container mx-auto">{children}</main>
    </>
  );
}

Copier après la connexion

Avantages clés

En utilisant cette approche, vous pouvez :

Maintenir plusieurs mises en page pour les itinéraires au même niveau.
Gardez la structure de votre projet propre et organisée.
Implémentez des fonctionnalités spécifiques, telles que Google Analytics, pour certaines mises en page. Par exemple, vous pouvez ajouter un suivi analytique spécifiquement dans LegalLayout pour des pages telles que /policy et /tos.

En tirant parti des Groupes de routes et des Layouts, Next.js vous permet de créer des architectures modulaires, évolutives et maintenables pour vos applications.

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!