4
章節4
建立佈局與頁面
到目前為止，您的應用程式只有一個首頁。讓我們學習如何使用佈局和頁面建立更多路由。
在本章節中...
以下是我們將涵蓋的主題
使用檔案系統路由建立 dashboard 路由。
了解資料夾和檔案在建立新的路由區段時所扮演的角色。
建立可在多個儀表板頁面之間共用的巢狀佈局。
了解什麼是共同定位、部分渲染和根佈局。
巢狀路由
Next.js 使用檔案系統路由，其中資料夾用於建立巢狀路由。每個資料夾代表一個對應到網址區段的路由區段。
您可以使用 layout.tsx 和 page.tsx 檔案為每個路由建立單獨的 UI。
page.tsx 是一個特殊的 Next.js 檔案，它會匯出一個 React 元件，並且是路由可供存取的必要條件。在您的應用程式中，您已經有一個頁面檔案：/app/page.tsx - 這是與路由 / 相關聯的首頁。
要建立巢狀路由，您可以將資料夾彼此巢狀，並在其中新增 page.tsx 檔案。例如：
/app/dashboard/page.tsx 與 /dashboard 路徑相關聯。讓我們建立這個頁面來看看它是如何運作的！
建立儀表板頁面
在 /app 內建立一個名為 dashboard 的新資料夾。然後，在 dashboard 資料夾內建立一個新的 page.tsx 檔案，並包含以下內容：
export default function Page() {
return <p>Dashboard Page</p>;
}現在，請確認開發伺服器正在執行，並瀏覽 https://127.0.0.1:3000/dashboard。您應該會看到「儀表板頁面」的文字。
這就是您在 Next.js 中建立不同頁面的方法：使用資料夾建立新的路由區段，並在其中新增一個 page 檔案。
透過賦予 page 檔案特殊名稱，Next.js 允許您將 UI 元件、測試檔案和其他相關程式碼與您的路由共同定位 (colocate)。只有 page 檔案內的內容可以公開存取。例如，/ui 和 /lib 資料夾與您的路由一起被*共同定位*在 /app 資料夾內。
練習：建立儀表板頁面
讓我們練習建立更多路由。在您的儀表板中，建立另外兩個頁面：
- 客戶頁面：此頁面應可在 https://127.0.0.1:3000/dashboard/customers 上存取。目前，它應該返回一個
<p>客戶頁面</p>元素。 - 發票頁面：發票頁面應可在 https://127.0.0.1:3000/dashboard/invoices 上存取。目前，也應返回一個
<p>發票頁面</p>元素。
花一些時間來完成這個練習，當您準備好後，展開下面的切換開關以查看解答。
建立儀表板佈局
儀表板有一些在多個頁面之間共用的導航功能。在 Next.js 中，您可以使用特殊的 layout.tsx 檔案來建立在多個頁面之間共用的 UI。讓我們為儀表板頁面建立一個佈局！
在 /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 /> 內，如下所示
儲存您的變更並檢查您的 localhost，確認一切正常運作。您應該會看到以下內容
在 Next.js 中使用佈局的一個好處是，在導航時，只有頁面元件會更新，而佈局不會重新渲染。這稱為局部渲染
根佈局
在第 3 章中，您將 Inter 字型匯入到另一個佈局：/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>
);
}這稱為根佈局，是必需的。您新增到根佈局的任何 UI 都將在應用程式中的**所有**頁面之間共用。您可以使用根佈局來修改您的 <html> 和 <body> 標籤，並新增中繼資料（您將在後面的章節中了解更多關於中繼資料的資訊）。
由於您剛才建立的新佈局 (/app/dashboard/layout.tsx) 是儀表板頁面專用的，因此您不需要在上面的根佈局中新增任何 UI。
有幫助嗎？