應用程式路由 (App Router)：建立版面配置與頁面

截至目前，您的應用程式僅有一個首頁。讓我們學習如何透過版面配置 (layouts) 和頁面 (pages) 建立更多路由。

巢狀路由 (Nested routing)

Next.js 使用檔案系統路由，其中資料夾用於建立巢狀路由。每個資料夾代表一個對應到URL 區段的路由區段 (route segment)。

您可以使用 layout.tsx 和 page.tsx 檔案為每個路由建立獨立的 UI。

page.tsx 是一個特殊的 Next.js 檔案，用於匯出 React 元件，且必須存在才能使路由可存取。在您的應用程式中，已經有一個頁面檔案：/app/page.tsx — 這是與路由 / 相關聯的首頁。

要建立巢狀路由，您可以將資料夾彼此嵌套，並在其中新增 page.tsx 檔案。例如：

圖表展示新增名為 dashboard 的資料夾如何建立新路由 '/dashboard'

/app/dashboard/page.tsx 與 /dashboard 路徑相關聯。讓我們建立該頁面來看看它的運作方式！

建立儀表板頁面

在 /app 內建立一個名為 dashboard 的新資料夾。接著，在 dashboard 資料夾內建立一個新的 page.tsx 檔案，並填入以下內容：

/app/dashboard/page.tsx

export default function Page() {
  return <p>儀表板頁面</p>;
}

現在，請確保開發伺服器正在執行，並訪問 http://localhost:3000/dashboard。您應該會看到「儀表板頁面」的文字。

這就是您在 Next.js 中建立不同頁面的方式：使用資料夾建立新的路由區段，並在其中新增 page 檔案。

透過為 page 檔案使用特殊名稱，Next.js 允許您將 UI 元件、測試檔案和其他相關程式碼與您的路由共置 (colocate)。只有 page 檔案內的內容會公開可存取。例如，/ui 和 /lib 資料夾與您的路由一起共置於 /app 資料夾內。

練習：建立儀表板頁面

讓我們練習建立更多路由。在您的儀表板中，建立兩個額外的頁面：

客戶頁面：該頁面應可透過 http://localhost:3000/dashboard/customers 存取。目前，它應回傳一個 <p>客戶頁面</p> 元素。
發票頁面：發票頁面應可透過 http://localhost:3000/dashboard/invoices 存取。目前，同樣回傳一個 <p>發票頁面</p> 元素。

花些時間進行此練習，準備好後，可展開下方切換按鈕查看解決方案：

建立儀表板版面配置

儀表板通常具有在多個頁面間共享的導覽功能。在 Next.js 中，您可以使用特殊的 layout.tsx 檔案來建立多個頁面間共享的 UI。讓我們為儀表板頁面建立一個版面配置！

在 /dashboard 資料夾內，新增一個名為 layout.tsx 的檔案，並貼上以下程式碼：

/app/dashboard/layout.tsx

import SideNav from '@/app/ui/dashboard/sidenav';
 
export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <div className="flex h-screen flex-col md:flex-row md:overflow-hidden">
      <div className="w-full flex-none md:w-64">
        <SideNav />
      </div>
      <div className="flex-grow p-6 md:overflow-y-auto md:p-12">{children}</div>
    </div>
  );
}

這段程式碼中有幾個重點，讓我們逐一解析：

首先，您將 <SideNav /> 元件匯入到您的版面配置中。任何匯入到此檔案的元件都將成為版面配置的一部分。

<Layout /> 元件接收一個 children 屬性。這個子元件可以是一個頁面或另一個版面配置。在您的案例中，/dashboard 內的頁面將自動嵌套在 <Layout /> 內，如下所示：

儲存變更並檢查您的本地主機，確認一切正常運作。您應該會看到以下內容：

在 Next.js 中使用版面配置的一個優點是，在導航時，只有頁面元件會更新，而版面配置不會重新渲染。這稱為部分渲染 (partial rendering)，可在頁面切換時保留版面配置中的客戶端 React 狀態。

根版面配置 (Root layout)

在第 3 章中，您將 Inter 字體匯入到另一個版面配置：/app/layout.tsx。作為提醒：

/app/layout.tsx

import '@/app/ui/global.css';
import { inter } from '@/app/ui/fonts';
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={`${inter.className} antialiased`}>{children}</body>
    </html>
  );
}

這稱為根版面配置 (root layout)，是每個 Next.js 應用程式所必需的。您新增到根版面配置的任何 UI 將在應用程式的所有頁面間共享。您可以使用根版面配置來修改 <html> 和 <body> 標籤，並新增元數據（您將在後續章節中了解更多關於元數據的資訊）。

由於您剛剛建立的版面配置 (/app/dashboard/layout.tsx) 是儀表板頁面專用的，因此您不需要在上述根版面配置中新增任何 UI。

建立版面配置與頁面

巢狀路由 (Nested routing)

建立儀表板頁面

練習：建立儀表板頁面

建立儀表板版面配置

根版面配置 (Root layout)

On this page