Next.js－架構

一開始就有 React 的感覺

簡述

以往我們用 React 做出來的專案通常都是「SPA（Single Page Application）」，不過到了 Next 就不一樣了，會變成「MPA（Multiple Page Application）」。

兩個最大的差別在於「SSR」和「CSR」，簡單來說就是一個是在 Server 端先渲染好以後在回傳 Response，另一個則是先回傳 Respnose 後再從 Client 端渲染。因此 S 和 R 的就是代表「Server」與「Client」的意思。

資料夾結構

首先用 create-next-app 建立好的專案會長這樣：

├── README.md
├── next.config.js
├── package.json
├── pages
│   ├── _app.js
│   ├── api
│   │   └── hello.js
│   └── index.js
├── public
│   ├── favicon.ico
│   └── vercel.svg
├── styles
│   ├── Home.module.css
│   └── globals.css
└── yarn.lock

基本上都跟 CRA（create-react-app）差不多，不過有幾個地方不同：

• 沒有 src，變成 pages 了
• public 中不會再有 index.html

前面有說過 Next 是一套 SSR 框架，代表我們所有的東西都「必須在 Server 端就處理好」，所以不會再跟 CSR 一樣先產生一個空殼（index.html）再做渲染。

取而代之的是 pages 這個資料夾，Next 會自動依據裡面的「檔案名稱」來產生對應的「Route」。例如說我新增了 about.js，那就會多出 /about 這個網址，index.js 也是一樣的道理，只是一般 index 就代表根目錄，所以網址會是 / 而不是 /index。

總之基本的 next 架構就長這樣，接著會一篇一篇解釋其他的相關功能。