# App Router & Pages Router
在 Next.js 中，`Pages Router` 和 `App Router` 是兩種不同的路由系統，分別適用於不同的開發場景。

### Pages Router
1. **定義頁面層級的路由**：
- `Pages Router` 是一種基於檔案結構的路由系統。所有放在 `pages` 資料夾下的檔案，會自動成為應用中的路由。比如，`pages/about.js` 會自動對應到 `/about` 路徑。

2. **所有元件為 React Client Component（客戶端元件）**：
- 使用 `Pages Router` 時，所有元件都是 React 的客戶端元件，這意味著它們會在瀏覽器上執行。這對於需要在客戶端進行互動的應用來說特別有用。

3. **只能使用 Next.js 提供的預設規則**：
- `Pages Router` 僅支持 Next.js 提供的預設路由規則，如檔案名稱即為路徑。這種路由方式簡單且直觀，但相對不靈活。

### App Router
1. **定義應用程式層級的路由**：
- `App Router` 是 Next.js 提供的更先進的路由系統，它允許在應用程式層級定義更複雜的路由邏輯，這些路由定義通常在 `app` 資料夾下。

2. **所有元件預設為 React Server Component（伺服器端元件）**：
- 使用 `App Router` 時，元件預設為 React 的伺服器端元件，這意味著它們會在伺服器上執行並在伺服器端生成 HTML，然後傳送給客戶端。這有助於提升效能，特別是在處理大量數據時。

3. **可自定義路由規則**：
- `App Router` 支持自定義路由規則，允許開發者使用正則表達式來匹配特定路徑，從而實現更靈活的路由配置。這對於複雜應用來說特別有用，因為可以更精細地控制路由行為。

### 總結
- **`Pages Router`** 更適合簡單且結構清晰的應用，因為它依賴於檔案結構並在客戶端執行元件。
- **`App Router`** 則提供了更大的靈活性和性能優勢，特別是在需要伺服器端渲染和複雜路由配置的情況下。

選擇哪種路由方式應根據應用的複雜性和需求來決定。