React vs. Next.js

1. 基本定義

名稱	定義	功能重點
React	一個由 Facebook 開發的前端 JavaScript 函式庫（Library），專注於 UI 組件渲染	- 建立互動式 UI - 組件化開發 - Virtual DOM 提升效能
Next.js	一個基於 React 的 全端框架（Framework），由 Vercel 開發	- 預設支援 SSR (Server-Side Rendering) - 靜態生成（SSG） - API routes，簡化後端呼叫 - SEO & 首屏加載優化

**重點差別：**React 是「建 UI 的工具」，Next.js 則是「完整專案框架」，內建 React 並加了很多現成功能。

---

2. 渲染方式

渲染方式	React	Next.js
CSR (Client-Side Rendering)	✅ 預設模式，所有 JS 在瀏覽器執行	✅ 也支援 CSR（可以像 React 一樣）
SSR (Server-Side Rendering)	❌ 不內建，需自己搭 Express 或 Node.js	✅ 內建 getServerSideProps 支援
SSG (Static Site Generation)	❌ 需外部工具配合	✅ 內建 getStaticProps 與 getStaticPaths 支援
ISR (Incremental Static Regeneration)	❌	✅ 允許靜態頁面增量更新

如果你的頁面需要 SEO 或首屏快速顯示，Next.js 的 SSR/SSG 會很有幫助。

---

3. 路由系統

• React：沒有內建路由，需要安裝 react-router-dom。

  • 自己定義路由邏輯。

• Next.js：內建「檔案系統路由」

  • pages/about.js → 自動對應 /about 路由

  • 支援動態路由 [id].js

  • 不用額外安裝路由套件。

---

4. API 與後端整合

• React：純前端，需要自己搭 Node.js/Express、Firebase、或其他後端來提供 API。

• Next.js：可以在 pages/api 下直接建立 API route

  // pages/api/hello.js
  export default function handler(req, res) {
    res.status(200).json({ message: "Hello from Next.js API" });
  }
  

  • 不用額外後端就能處理資料請求。

---

5. 部署與優化

• React：打包成靜態檔案（HTML + JS + CSS）部署在任何靜態主機（Netlify、Vercel、IIS）。

• Next.js：

  • 靜態頁面 → 可部署在靜態主機

  • SSR/ISR → 需要 Node.js 伺服器支援，Vercel 部署最方便

  • 自動 code splitting、image optimization、預取路由，效能更好

---

6. 適合使用情境

情境	推薦
單純 SPA 或後端另行提供 API	React 即可
SEO 高需求的網站	Next.js
Blog / Landing Page / Marketing 網站	Next.js（SSG/ISR）
需要快速全端 API 功能	Next.js
純前端 Dashboard 或管理系統	React 足夠

---

7. 簡單比喻

• React：像是蓋房子的「磚塊」

• Next.js：像是蓋房子的「工具包 + 設計圖 + 裝潢方案」，幫你省很多時間