使用 App Router 和路由群組管理 Next.js 中的多個佈局-js教程-PHP中文網

使用 App Router 和路由群組管理 Next.js 中的多個佈局

Mary-Kate Olsen

發布： 2025-01-17 02:34:11

原創

564 人瀏覽過

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

在 Next.js 13 中，引入了 App Router 以及一些令人興奮的功能，例如佈局、錯誤邊界、載入指示器等。然而，一些開發人員在管理同一路線層級的多個佈局時面臨挑戰。下面，我將向您展示針對此類場景建立和維護乾淨、方便的佈局的最佳方法。

第 1 步：建立根佈局（可選）

根佈局對於為整個應用程式定義全域元件或上下文提供者非常有用。不過，如果您的應用程式不需要全域配置，則可以跳過此步驟。

// app/layout.tsx

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

登入後複製

步驟 2：定義特定路由群組的佈局

假設我們需要 /home 和 /contact 頁面的頁首和頁尾。為了實現這一點，我們可以使用 Next.js 路由組。

例如，我們將建立一個名為 （行銷） 的路由群組，並將我們的頁面放入其中。像 app/(marketing)/home/page.tsx 和 app/(marketing)/contact/page.tsx 這樣的頁面將使用 app/(marketing)/layout.tsx 佈局。

// app/(marketing)/layout.tsx

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

登入後複製

步驟 3：為其他路由群組建立佈局

同樣，對於 /policy 和 /tos 這樣的頁面，我們可以建立一個名為 （合法） 的新路由組，並為其定義特定的佈局。

// app/(legal)/layout.tsx

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

登入後複製