章節4

建立版面配置和頁面

到目前為止，您的應用程式只有一個首頁。讓我們學習如何使用版面配置和頁面建立更多路由。

在本章中...

以下是我們將涵蓋的主題

使用檔案系統路由建立 dashboard 路由。

了解資料夾和檔案在建立新路由區段時的角色。

建立可在多個儀表板頁面之間共享的巢狀版面配置。

了解共置 (colocation)、部分渲染和根版面配置是什麼。

巢狀路由

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

Diagram showing how folders map to URL segments

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

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

若要建立巢狀路由，您可以將資料夾相互巢狀放置，並在其中新增 page.tsx 檔案。例如：

Diagram showing how adding a folder called dashboard creates a new route '/dashboard'

/app/dashboard/page.tsx 與 /dashboard 路徑關聯。讓我們建立頁面以查看其運作方式！

建立儀表板頁面

在 /app 內建立一個名為 dashboard 的新資料夾。然後，在 dashboard 資料夾內建立一個新的 page.tsx 檔案，內容如下：

/app/dashboard/page.tsx

export default function Page() {
  return <p>Dashboard Page</p>;
}

現在，請確保開發伺服器正在執行，並訪問 https://127.0.0.1:3000/dashboard。您應該會看到「Dashboard Page」文字。

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

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

練習：建立儀表板頁面

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

客戶頁面：該頁面應可從 https://127.0.0.1:3000/dashboard/customers 存取。目前，它應傳回 <p>Customers Page</p> 元素。
發票頁面：發票頁面應可從 https://127.0.0.1:3000/dashboard/invoices 存取。目前，也傳回 <p>Invoices Page</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 /> 內，如下所示：

Folder structure with dashboard layout nesting the dashboard pages as children

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

Dashboard page with a sidenav and a main content area

在 Next.js 中使用版面配置的一個好處是，在導覽時，只有頁面元件會更新，而版面配置不會重新渲染。這稱為部分渲染，它會在頁面之間轉換時，保留版面配置中客戶端 React 狀態。

Folder structure showing the dashboard layout nesting the dashboard pages, but only the pages UI swap on navigation

根版面配置

在第 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>
  );
}

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

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