Managing Multiple Layouts in Next.js with App Router and Route Groups-JS Tutorial-php.cn

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

Mary-Kate Olsen

Release： 2025-01-17 02:34:11

Original

565 people have browsed it

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

In Next.js 13, the App Router was introduced with several exciting features, such as layouts, error boundaries, loading indicators, and more. However, some developers face challenges when managing multiple layouts at the same route level. Below, I’ll show you the best way to structure and maintain clean, convenient layouts for such scenarios.

Step 1: Create a Root Layout (Optional)

A root layout is useful for defining global components or context providers for your entire app. However, if your app doesn’t require global configurations, you can skip this step.

// app/layout.tsx

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

Copy after login

Step 2: Define Layouts for Specific Route Groups

Suppose we need a Header and Footer for the /home and /contact pages. To achieve this, we can use Next.js Route Groups.

For example, we’ll create a route group called (marketing) and place our pages inside it. Pages like app/(marketing)/home/page.tsx and app/(marketing)/contact/page.tsx will use the app/(marketing)/layout.tsx layout.

// app/(marketing)/layout.tsx

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

Copy after login

Step 3: Create Layouts for Other Route Groups

Similarly, for pages like /policy and /tos, we can create a new route group called (legal) and define a specific layout for it.

// app/(legal)/layout.tsx

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

Copy after login

Key Benefits

Using this approach, you can:

Maintain multiple layouts for routes at the same level.
Keep your project structure clean and organized.
Implement specific features, such as Google Analytics, for certain layouts. For example, you could add analytics tracking specifically within the LegalLayout for pages like /policy and /tos.

By leveraging Route Groups and Layouts, Next.js empowers you to create modular, scalable, and maintainable architectures for your applications.

The above is the detailed content of Managing Multiple Layouts in Next.js with App Router and Route Groups. For more information, please follow other related articles on the PHP Chinese website!