Next.js 的 app 與 page 路由解析

Next.js 是一個 React 框架，以其簡單且強大的路由系統聞名。這個系統主要由兩個核心部分組成：App Router 和 Page Router。Page Router 是 Next.js 從創立至今一直使用的傳統路由方式，而 App Router 則是新的概念，提供更高的可組合性與靈活性。這篇文章將帶你了解這兩者的架構與實際應用場景，以便在專案開發中制定最佳的路由方案。

Page Router 是 Next.js 的預設路由方式，路由的配置方式簡單直觀。每個 pages 資料夾下的文件自動對應到一個路由。例如，建立一個文件 pages/about.js，在瀏覽器中訪問 /about 路徑就會渲染該頁面：

// pages/about.js
export default function About() {
  return <h1>關於我們</h1>;
}

這種路由方式適合小型到中型的項目開發，更易於快速上手，但在高複雜度的應用中可能會遇到擴展性不足的問題。

App Router 是 Next.js 提供的進階路由方式，允許更細粒度的控制與模組化設計。其主要用於大型專案，並大幅提高了代碼的可維護性與重用性。以一個簡單的例子來示範：

// app/about/layout.js
export default function AboutLayout({ children }) {
  return (
    <div>
      <Navbar />
      {children}
      <Footer />
    </div>
  );
}

// app/about/page.js
export default function About() {
  return <h1>關於我們</h1>;
}

透過這種方式，不同路徑下的頁面可以共享佈局元件，實現了更靈活的設計。

Page Router 適用於結構簡單、開發週期較短的小型專案。如果你的應用路由層級不深，且不需要高度的動態路由配置，那麼 Page Router 是極佳的選擇。透過這種方式，開發者可以快速啟動專案，並以最少的配置快速上手。

當專案龐大且需求複雜時，App Router 是更理想的選擇。特別是在不同路徑間需要共享邏輯或佈局時，App Router 的模組化設計能大幅提升代碼的可複用性與可讀性。這種方案適合高流量、需要持續維護的企業級應用。

動態路由在大型應用中十分常見，Next.js 提供了便利的方式實現動態路由配置。使用 Page Router 時，可以在文件名稱中使用方括號定義動態路由參數：

// pages/posts/[id].js
import { useRouter } from 'next/router';

export default function Post() {
  const router = useRouter();
  const { id } = router.query;

  return <h1>文章內容：{id}</h1>;
}

而在 App Router 中，動態路由則由文件夾名稱中加上方括號來表示。

一個專案中並不一定只能單一使用某種路由策略，有時候混合使用 Page Router 和 App Router 可以達到最優化效果。在 Next.js 中，可以在整合現有大型專案的過程中利用 Page Router 的簡單性與 App Router 的靈活性來完成複雜功能的搭建，這取決於專案的具體需求。

選擇合適的路由模式對專案的效能也有直接的影響，Page Router 對於小型應用效能友好，而 App Router 透過分頁佈局的靈活性在大型應用中擁有優勢。例如，使用 App Router 可以輕鬆地在頁面中實現代碼分拆，僅加載用戶需要的部分快速響應。

Next.js 自主的路由功能非常適合用於實現良好的 SEO 效果，App Router 和 Page Router 均支持服務端渲染(SSR)，但具體選擇何種方案取決於頁面的複雜度以及對 SEO 的特殊要求。對於那些依賴即時內容更新的頁面，App Router 的部份佈局重用和組件化設計能夠簡化 SSR 的操作，從而提高 SEO 效果。

總結來說，Next.js 的 Page Router 方便簡單，適合小型或中型項目；App Router 功能強大，設計更考慮大型項目的拓展性與複用性。在做出選擇之前，應確定專案的長期維護需求，結合團隊成員經驗水平，來選擇最恰當的路由策略。若專注於快速開發且團隊成員對 React 熟悉，Page Router 是良好選擇；若重視長期結構管理，則建議考慮 App Router。