深入理解 Next.js 的路由機制

作者：碼力無邊

---

在上一篇文章中，我們成功創建并運行了第一個 Next.js 應用。當你打開項目文件夾時，你可能會注意到一個名為 pages 的目錄。這個目錄看似普通，但它卻是 Next.js 路由系統的核心。今天，我們將深入探索這個“約定優于配置”的強大機制。

如果你有使用過其他前端框架（如 react-router-dom）的經驗，你可能習慣于在一個集中的地方手動編寫路由配置。你需要將 URL 路徑映射到相應的組件上。

// react-router-dom 的傳統方式
<Routes><Route path="/" element={<Home />} /><Route path="about" element={<About />} />
</Routes>

Next.js 則采取了一種截然不同的、更直觀的方式：你的文件系統就是你的路由。

核心理念：pages 目錄即路由

在 Next.js 中，pages 目錄下的每個 React 組件文件都會自動成為應用程序中的一個頁面（路由）。文件路徑直接映射到 URL 路徑。

這種方法有幾個顯而易見的好處：

• 直觀：項目結構清晰地反映了網站的 URL 結構。
• 零配置：你不需要編寫任何路由配置文件，只需創建文件即可。
• 易于維護：添加、刪除或重命名頁面就像操作文件一樣簡單。

現在，讓我們通過幾個實例來具體了解它是如何工作的。

1. 創建基礎頁面（靜態路由）

這是最簡單的情況。你只需在 pages 目錄下創建一個 .js, .jsx, .ts, 或 .tsx 文件。

假設我們想創建一個“關于我們”的頁面，其 URL 應該是 /about。我們只需要在 pages 目錄下創建一個名為 about.tsx 的文件：

文件路徑: pages/about.tsx

// pages/about.tsxfunction AboutPage() {return (<div><h1>關于我們</h1><p>這是一個使用 Next.js 構建的博客專欄。</p></div>);
}export default AboutPage;

就這樣！現在啟動你的開發服務器 (npm run dev)，然后訪問 http://localhost:3000/about，你就能看到這個頁面了。

特殊文件：pages/index.tsx 是一個特殊的文件，它對應的是網站的根路徑 /。

2. 構建嵌套路由

如果你的網站結構更復雜，需要像 /dashboard/settings 這樣的嵌套 URL 呢？同樣簡單，只需在 pages 目錄下創建相應的文件夾結構即可。

讓我們來創建一個用戶儀表盤的路由結構：

1. 在 pages 目錄下創建一個名為 dashboard 的文件夾。
2. 在 dashboard 文件夾內創建 index.tsx 和 settings.tsx。

文件結構:

pages/
├── dashboard/
│   ├── index.tsx
│   └── settings.tsx
└── ...

對應的路由:

• pages/dashboard/index.tsx -> /dashboard
• pages/dashboard/settings.tsx -> /dashboard/settings

這種方式讓你的項目結構與 URL 保持高度一致，一目了然。

3. 探索動態路由

這是 Next.js 路由最強大的功能之一。很多時候，我們需要的頁面路徑不是固定的，而是包含動態參數的。例如，博客文章的 URL (/posts/my-first-post)，商品詳情頁的 URL (/products/123)。

為了實現這一點，Next.js 引入了方括號 [] 語法。

假設我們要為博客文章創建動態路由。我們可以在 pages 目錄下創建一個這樣的文件：

文件路徑: pages/posts/[slug].tsx

這里的 [slug] 就是一個動態段（dynamic segment）。slug 是一個占位符，它可以匹配 /posts/ 之后的任何字符串，比如 /posts/hello-world 或 /posts/getting-started。

那么，我們如何在頁面組件中獲取到這個動態的 slug 值呢？這就需要用到 Next.js 提供的 useRouter 鉤子（Hook）。

// pages/posts/[slug].tsximport { useRouter } from 'next/router';function PostPage() {const router = useRouter();const { slug } = router.query; // 從 router.query 中解構出 slug// 在頁面首次加載時，router.query 可能為空，需要處理這種情況if (!router.isReady) {return <div>加載中...</div>;}return (<div><h1>文章標題：{slug}</h1><p>這里是文章的具體內容...</p></div>);
}export default PostPage;

現在，當你訪問 http://localhost:3000/posts/my-first-article 時，頁面上就會顯示 “文章標題：my-first-article”。

提示：你也可以創建更復雜的動態路由，比如 pages/shop/[category]/[id].tsx，它會匹配像 /shop/electronics/123 這樣的 URL。

總結

今天，我們學習了 Next.js 路由系統的三大核心用法：

路由類型	文件結構示例	對應的 URL
靜態路由	pages/contact.tsx	/contact
嵌套路由	pages/profile/index.tsx	/profile
動態路由	pages/blog/[slug].tsx	/blog/any-post-name

通過將路由定義與文件系統綁定，Next.js 極大地簡化了路由管理，降低了開發者的心智負擔。你不再需要維護一個復雜的路由配置文件，只需要關注于你的頁面組件和項目的文件結構。

我們已經知道如何創建頁面了，但一個完整的網站還需要在這些頁面之間進行導航。在下一篇文章中，我們將學習如何使用 Next.js 的 <Link> 組件和 useRouter 鉤子來實現流暢的客戶端導航。敬請期待！