Next.js 14 的 App Router 憑藉著 app/ 目錄中基於檔案的路由系統徹底改變了路由管理。這種方法可以促進更好的應用程式結構、模組化和效能。 本指南概述了 Next.js 專案中有效的 App Router 實作。
了解應用程式路由器
App Router 重新定義了路由定義。 目錄結構直接對應到 URL 路徑。 /app 中的資料夾成為路由，簡化了嵌套佈局、路由分組和資料獲取，尤其是在大型應用程式中。
設定應用程式路由器
npx create-next-app@latest
/app 目錄啟用。無需額外配置。 基本路由
/app內的檔案和資料夾會自動對應到路線：
<code>app/
├── page.tsx # Homepage ("/")
├── about/
│ └── page.tsx # About page ("/about")
└── blog/
├── page.tsx # Blog index ("/blog")
└── [slug]/
└── page.tsx # Dynamic blog posts ("/blog/[slug]")</code>app/about/page.tsx 對應到 /about。 []) 定義動態段。 app/blog/[slug]/page.tsx 處理類似 /blog/my-post.佈局和巢狀
App Router 簡化了佈局建立和重複使用。
建立版面：
資料夾中的 layout.tsx 檔案適用於該資料夾中的所有頁面和元件。
<code>app/ ├── layout.tsx # App-wide layout ├── about/ │ ├── layout.tsx # About page layout │ └── page.tsx # About page content</code>
<code class="language-javascript">// app/layout.tsx
export default function RootLayout({ children }) {
return (
<html>
<body>
<h1>My App</h1>
{children}
</body>
</html>
);
}</code>巢狀路由與版面：
佈局嵌套，在嵌套路由之間提供一致的 UI。
<code>app/
├── dashboard/
│ ├── layout.tsx # Dashboard layout
│ ├── page.tsx # Dashboard home ("/dashboard")
│ └── settings/
│ └── page.tsx # Dashboard settings ("/dashboard/settings")</code>/dashboard/ 版面配置適用於 /dashboard 和 /dashboard/settings。
路線組
路由組使用帶括號的資料夾來組織程式碼，而無需更改 URL。
<code>app/ ├── (dashboard)/ │ ├── profile/ │ │ └── page.tsx # "/profile" │ ├── settings/ │ │ └── page.tsx # "/settings"</code>
/profile 和 /settings 分組在 (dashboard) 下以進行程式碼組織。
捕捉所有路線
處理檔案名稱中帶有 ... 的多個 URL 片段：[...]/page.tsx 擷取 /blog/a/b/c.
錯誤和載入狀態
Next.js 14 使用 error.tsx 和 loading.tsx 進行錯誤處理和載入路由內的指示器。
資料取得
使用 async/await 或鉤子直接在元件中取得伺服器端資料。
<code class="language-javascript">// app/dashboard/page.tsx
export default async function DashboardPage() {
const data = await fetch('https://api.example.com/data').then(res => res.json());
return <div>{JSON.stringify(data)}</div>;
}</code>伺服器操作
使用伺服器操作處理元件內的伺服器端邏輯（例如表單提交）。
部署
部署 App Router 應用程式與標準 Next.js 部署相同。 強烈建議使用 Vercel 以獲得最佳效能。
Next.js 14 App Router 提供了一種靈活的模組化方法，可以使用更簡潔的程式碼建立可擴展的高效能應用程式。 本指南為在專案中利用其功能奠定了基礎。
以上是Next.js 中的路由 – 如何在您的下一個應用程式中使用 App Router的詳細內容。更多資訊請關注PHP中文網其他相關文章！
