# Next.js app router vs page router ## 前言 大多數人對於 Next.js 這套框架都應該不陌生，基於 React 的 SSR 框架，但在版本 v13 前後上卻有不同路由系統變更，本文章想簡單探討 app router 與 page router 差異。 ## Start ``` What is your project named? my-app Would you like to use TypeScript? No / Yes Would you like to use ESLint? No / Yes Would you like to use Tailwind CSS? No / Yes Would you like to use `src/` directory? No / Yes Would you like to use App Router? (recommended) No / Yes Would you like to customize the default import alias (@/*)? No / Yes What import alias would you like configured? @/* ``` 跟著[官方文件](https://nextjs.org/docs/getting-started/installation) 試著啟專案使用 v14 版本(僅支援 Node.js v18.17 以上的版本)，發現路由選項上default 建議為 app router。 ### 專案結構 建置完後，可以看到主要 app 目錄結構如下： ``` └── app ├── about └── page.tax ├── globals.css ├── layout.tsx └── page.tsx ``` * app - page / component / api 都會收納在底下 * globals.css: 全域樣式定義檔案 * layout.tsx: 主要用來管理 UI 介面，root layout用來定義標籤`<html> <body>`以及其他全域共享的 UI 如：`<nav>` * page.tsx: 主要用來使用 router 的功能如同 Page router。每個資料夾都對應一個 route 路徑，底下都會需要有 page.tsx 才能成為 route segment ## Next Router Next.js 使用基於檔案系統的路由器(file-system based router)，自動使用資料夾來定義路由，相較 React 專案中使用`react-router-dom` 來定義路由方便許多。隨著版本跟進 Next.js 也發展出兩種路由管理方式，比較如下： App router * 元件為 React Server Component（伺服端元件） * 基於目錄的路由系統 Page router * 元件為 React Client Component（客戶端元件） * 基於檔案的路由系統 在研究過程中發現最大的改變其實在於 RSC 的推進，而在 app router 中可以透過 `'use client'` 標示元件類型切換成 RCC 但預設的元件皆為 RSC。 簡單區分這兩者元件之間的差別在於，渲染元件的時機與功用。 #### React Server Component * 在 Server Side render * 整合後端操作，具有訪問 DB、file system 的能力 * 無法使用 React Hooks 以及事件綁定操作，故無法操作瀏覽器 #### React Client Component： * 在 Client Side render * 可綁定事件能力擁有互動性。 ## App router ## Page router