選擇你自己的冒險：NEXT.js 應用程式與頁面路由器

胡家維 Hu Kenneth

Published in

ATaiwanSoftwareDeveloperInSG

10 min readAug 2, 2024

source : https://medium.com/@jawaragordon/choose-your-own-adventure-next-js-app-vs-pages-router-528dbf25b37f by 賈瓦拉·戈登

“Next.js 是一個用於建立全端 Web 應用程式的 React 框架。” — NEXTjs.org

什麼是 Next.js？

在擁擠的 JavaScript 框架領域，Next.js 脫穎而出。這個簡化的工具允許開發人員快速且有效率地建立現代 Web 應用程式。

想像一下將 React 的強大功能與伺服器端渲染和靜態網站產生的額外優勢結合起來。 Next.js 的美妙之處在於它的簡單性，使開發人員能夠專注於真正重要的事情 — 創造卓越的用戶體驗。無論您是建立個人部落格還是動態企業應用程序，Next.js 都將把您的編碼之旅從艱苦的戰鬥轉變為充滿樂趣的冒險！

讓我們深入了解 Next.js 的簡史，從頭開始建立一個新應用程序，並確定哪個路由選項最適合您的下一個專案。

岔路口

出於對更好效能、可擴展性和效率的需求，Vercel（以前稱為 Zeit）於 2016 年 10 月推出了 Next.js。這個輕量級框架的設計重點是約定優於配置。 Next 的開箱即用的伺服器端渲染、路由和工具是對單頁應用程式 (SPA) 中面臨的挑戰（例如 SEO 優化、載入時間和程式碼分割）的直接回應。

透過解決這些問題，Next.js 在 React 社群中繼續受到歡迎，同時繼續適應不斷變化的 Web 開發環境。

入門

本指南假設您熟悉使用命令列工具，並對 Node.js、React 和 vanilla JavaScript 有基本了解。

安裝

Next.js 可以透過名為「create-next-app」的自動安裝程序來完全引導。

若要建立新項目，請在終端機中執行以下命令：

$ npx create-next-app@latest

您將看到以下提示：

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? @/*

選擇最適合您的提示並記住 -您以後可以隨時添加更多依賴項。 Next.js 預設附帶 TypeScript、ESLint 和 Tailwind CSS，此外還有一個可選的「src」目錄，用於將應用程式程式碼與設定檔分開。

注意：此範例使用 TypeScript，但是用 .js 取代 .tsx 將產生相同的結果。

Create-next-app 將產生一個包含您的專案名稱的資料夾並安裝所需的依賴項。

您也可以選擇進行手動安裝。

若要手動安裝，請新增以下軟體包：

$ npm install next @latest React @latest React-dom @latest

開啟“package.json”檔案並新增以下腳本：


{
 “scripts”: {
   “dev”: “next dev”,
   “build”: “next build”,
   “start”: “next start”,
   “lint”: “next lint”
 }
}

這些腳本涉及開發週期的不同階段：

` dev `：執行 `next dev` 以在開發模式下啟動 Next.js。
` build `：執行 `next build` 來建立應用程式以供生產使用。
` start `：執行 `next start` 來啟動 Next.js 生產伺服器。
` lint `：執行 `next lint` 來設定 Next.js 的內建 ESLint 配置。

專案結構

Next.js 使用檔案系統路由，這表示應用程式中的路由由您建立檔案的方式決定。該慣例要求您在任何新專案開始時做出重大決定。App Router 與 Pages Router — 您應該選擇哪一個？

讓我們仔細看看每種方法的優缺點，以及這對您的應用程式意味著什麼：

應用程式路由器 (App router)

App Router 是 Next.js 對進階路由需求的回應，允許更複雜的模式和設定。

結構：

應用程式路由器與傳統結構發生了轉變，採用了更模組化和有組織的目錄方法：

└── app
    ├── about
    │   └── page.tsx
    ├── globals.css
    ├── layout.tsx
    ├── login
    │   └── page.tsx
    ├── page.js 
    └── team
        └── route.tsx

特徵：

客戶端和伺服器元件：允許區分在伺服器上執行的元件與在客戶端上執行的元件。這提供了更好的優化，特別是在處理伺服器端操作與客戶端互動時。
簡單的佈局：使用“layout.js”，管理佈局變得更容易、更直覺。嵌套佈局進一步簡化了層次頁面結構。
伺服器操作：此功能可讓您根據客戶端事件執行伺服器端程式碼。
攔截路由：提供一個根據條件呈現不同元件的機制，即使 URL 保持不變。
並行路由：讓您在同一 URL 上呈現多個頁面，從而增強靈活性。
內建 SEO：應用程式路由器引入了處理元資料的內建方法，使「next/head」變得多餘。

優點

靈活性：適應廣泛的路由場景。
動態資料處理：與不同的資料來源無縫整合。

缺點

學習曲線：對於初學者來說可能會讓人不知所措。
優化：需要額外的努力才能確保最佳效能。

頁面路由器 (Pages Router)

頁面路由系統直覺又有效。透過將 React 元件新增至「pages」目錄中，路由會自動建立。

結構：

歷史上 Next.js 使用 `pages` 目錄根據檔案名稱自動產生路由：

└── pages
    ├── about.tsx
    ├── index.tsx
    └── team.tsx

特徵：

自動路由：將 `.js` 或 `.tsx` 檔案加入 `pages` 目錄會自動建立路由。
SEO 優化：使用「next/head」元件，SEO 優化變得非常簡單。
資料取得方法：包含用於取得資料的` getStaticProps`、` getServerSideProps`和` getStaticPaths`。
自訂文件和應用程式元件：允許自訂整體文件結構和佈局。

優點

效率：Next.js 簡化了開發流程，節省了時間。
SEO 就緒：透過伺服器端渲染，內容已為使用者和搜尋引擎做好準備。

缺點

複雜路線：可能不適合複雜的路線需求。
命名約定：結構與檔案和資料夾名稱相關，要求命名準確。

保羅席爾瓦 (Paulo Silva) 在 Unsplash 上拍攝的照片

做出決定

那麼，您如何決定走哪條路以及什麼最適合您的專案呢？

“對於新應用程序，我們建議使用 App Router。” — NEXTjs.org

Next.js 團隊顯然已全力投入應用程式路由器 — 但在做出決定之前請考慮以下因素：

•專案範圍：是簡約的部落格還是多元化的電子商務平台？

•可擴展性：考慮未來的成長和擴展需求。

“Pages Router 是最初的 Next.js 路由器，[…]並且繼續支援較舊的 Next.js 應用程式。” — NEXTjs.org

您今天的路由選擇可以並將會影響您的專案的發展，因此請明智地選擇！

應用程式路由器

以下是如何開始使用「應用程式路由器」。

建立一個 `app/` 資料夾，然後新增一個 `layout.tsx` 和 `page.tsx` 檔案：

// app/layout.tsx

export default function RootLayout({
 children,
}: {
 children: React.ReactNode
}) {
 return (
 <html lang="en">
 <body>{children}</body>
 </html>
 );
}

// app/page.tsx
export default function Page() {
 return <h1>Hello, Next.js!</h1>;
}

如果您忘記建立 `layout.tsx`，Next.js 將在使用 `next dev` 運行開發伺服器時自動新增此檔案。

頁面路由器

如果您喜歡使用頁面路由器，則應該在專案的根目錄下建立一個「pages/」目錄。


// pages/index.tsx

export default function Page() {
 return <h1>Hello, Next.js!</h1>;
}

// pages/_app.tsx
import type { AppProps } from 'next/app'
 
export default function App({ Component, pageProps }: AppProps) {
 return <Component {…pageProps} />;
}

// pages/_document.tsx
import { Html, Head, Main, NextScript } from 'next/document'
 
export default function Document() {
 return (
 <Html>
 <Head />
 <body>
 <Main />
 <NextScript />
 </body>
 </Html>
 );
}

專業提示：
您可以在同一專案中使用兩個路由器，其中「app」路由優先於「pages」 — 但建議僅使用一個以避免混淆。

最後的步驟

建立一個「public」資料夾來儲存靜態資源，例如圖片、字體等。

可以透過引用此清單將其他資料夾動態路由和設定檔新增至專案結構：專案結構

運行開發伺服器

要查看您的所有工作，請運行：

$ npm run dev

請造訪 [ http://localhost:3000](http://localhost:3000)查看您的應用程式。

編輯“app/layout.tsx”（或“pages/index.tsx”）以查看您的變更在瀏覽器中的編譯情況。

成功！

前進的道路

App Router 在 Next.js 框架中引入了重大演變，提供了進階功能和增強的靈活性。雖然 Pages Router 對於許多應用程式來說仍然足夠，但建議的 App Router 的功能提供了更好的控制和功能。

請記住，在兩個路由器之間進行選擇並不是「正確」或「錯誤」的問題，而是最適合您專案需求的問題。無論您是 Next.js 的新手，還是希望適應最新功能的經驗豐富的用戶，本指南都旨在為您的下一個專案指明正確的方向！

資料來源：

- https://nextjs.org/blog/next-2-0
- https://vercel.com
- https://nextjs.org/docs