測驗：Next.js 是什麼？為什麼選擇它？
共 5 題，點選答案後會立即顯示結果
1. Next.js 與 React 之間的關係是什麼？
2. 在 Next.js 專案中，如何快速辨識這是一個 Next.js 13+ 的專案？
3. 關於 SSR（伺服器端渲染）和 SSG（靜態網站生成）的描述，何者正確？
4. Next.js 的檔案式路由系統中，以下哪個檔案結構對應到 /blog/hello-world 這個路徑？
5. 在什麼情況下，使用純 React 可能比使用 Next.js 更適合？
前言
如果你已經學過 React，可能會發現：建立一個完整的網站需要自己處理很多事情——路由設定、SEO 優化、伺服器端渲染等等。Next.js 就是為了解決這些問題而生的框架。
本篇將帶你認識 Next.js，了解它與純 React 的差異，以及什麼情況下該選擇它。
學習目標
讀完本篇後，你將能夠：
- 理解 Next.js 是什麼以及它與 React 的關係
- 了解 Next.js 的核心優勢（SSR、SSG、檔案路由）
- 判斷何時適合使用 Next.js
Next.js 是什麼？
定義
Next.js 是一個基於 React 的全端框架（Full-stack Framework），由 Vercel 公司開發維護。它在 React 的基礎上，提供了許多「開箱即用」的功能，讓你不需要自己從零設定。
用一句話來說：
**Next.js = React + 路由 + 伺服器端渲染 + 更多內建功能**
簡短歷史
- 2016 年：Vercel（當時叫 Zeit）推出 Next.js
- 2020 年：Next.js 10 推出 Image 元件、國際化支援
- 2022 年：Next.js 13 推出 App Router，大幅改變路由架構
- 2023-2024 年：Server Components 成為預設，效能持續優化
React vs Next.js：關鍵差異
當你閱讀程式碼時，可能會困惑：「這是 React 還是 Next.js？」以下是快速辨識的方法：
專案結構差異
純 React 專案（Create React App）
my-react-app/
├── src/
│ ├── App.js # 主元件
│ ├── index.js # 進入點
│ └── components/ # 元件資料夾
└── public/
└── index.html # 唯一的 HTML 檔案
Code language: PHP (php)Next.js 專案（App Router）
my-next-app/
├── app/ # 路由資料夾
│ ├── page.tsx # 首頁 (/)
│ ├── about/
│ │ └── page.tsx # 關於頁 (/about)
│ └── layout.tsx # 共用版型
├── public/ # 靜態資源
└── next.config.js # Next.js 設定檔
Code language: PHP (php)關鍵識別點：看到 app/ 資料夾搭配 page.tsx、layout.tsx，幾乎可以確定是 Next.js 13+ 專案。
路由方式差異
React：需要額外安裝路由套件
// React 需要使用 react-router-dom
import { BrowserRouter, Routes, Route } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</BrowserRouter>
);
}
Code language: JavaScript (javascript)Next.js：檔案即路由
app/
├── page.tsx → 對應路徑 /
├── about/
│ └── page.tsx → 對應路徑 /about
└── blog/
└── [slug]/
└── page.tsx → 對應路徑 /blog/任意值
你只需要建立檔案，Next.js 就自動幫你處理路由。
渲染方式差異
React（純客戶端渲染 CSR）
使用者請求 → 伺服器回傳空的 HTML → 瀏覽器下載 JS → 執行 JS 產生畫面
Next.js（可選擇多種渲染方式）
伺服器端渲染（SSR）：每次請求時，伺服器產生完整 HTML
靜態生成（SSG）：建置時預先產生 HTML
客戶端渲染（CSR）：和 React 相同
核心概念：SSR 與 SSG
伺服器端渲染（Server-Side Rendering, SSR）
SSR 意味著每次使用者訪問頁面時，伺服器會執行 React 程式碼，產生完整的 HTML 再傳給瀏覽器。
// app/products/page.tsx
// 這個頁面會在每次請求時從資料庫取得最新資料
async function ProductsPage() {
// 這段程式碼在伺服器端執行
const products = await fetch('https://api.example.com/products', {
cache: 'no-store' // 不快取，每次都取得最新資料
});
return (
<ul>
{products.map(p => <li key={p.id}>{p.name}</li>)}
</ul>
);
}
export default ProductsPage;
Code language: JavaScript (javascript)SSR 優點：
- 使用者看到完整內容的速度快
- 搜尋引擎可以正確抓取內容（SEO 友善）
SSR 適用情境：
- 內容經常變動（如商品庫存、新聞）
- 需要根據使用者身份顯示不同內容
靜態網站生成（Static Site Generation, SSG）
SSG 在「建置時期」就產生好 HTML 檔案，之後每個使用者都拿到相同的預先產生內容。
// app/blog/[slug]/page.tsx
// 這個頁面會在建置時預先產生
// 告訴 Next.js 要預先產生哪些頁面
export async function generateStaticParams() {
const posts = await fetch('https://api.example.com/posts').then(r => r.json());
return posts.map(post => ({ slug: post.slug }));
}
async function BlogPost({ params }) {
const post = await fetch(`https://api.example.com/posts/${params.slug}`);
return (
<article>
<h1>{post.title}</h1>
<p>{post.content}</p>
</article>
);
}
export default BlogPost;
Code language: JavaScript (javascript)SSG 優點：
- 載入速度極快（只是讀取靜態檔案）
- 可以部署到 CDN，全球快速存取
- 伺服器負擔低
SSG 適用情境：
- 部落格文章
- 產品介紹頁
- 文件網站
Next.js 核心特色一覽
1. 檔案式路由（File-based Routing）
建立檔案 = 建立路由，直覺又好維護：
app/
├── page.tsx → /
├── about/page.tsx → /about
├── blog/page.tsx → /blog
├── blog/[slug]/page.tsx → /blog/任意值
└── shop/[...slug]/page.tsx → /shop/a/b/c（捕捉所有子路徑）
2. API Routes
不需要另外架設後端伺服器，直接在 Next.js 專案中寫 API：
// app/api/hello/route.ts
import { NextResponse } from 'next/server';
export async function GET() {
return NextResponse.json({ message: 'Hello from API!' });
}
export async function POST(request: Request) {
const body = await request.json();
return NextResponse.json({ received: body });
}
Code language: JavaScript (javascript)訪問 /api/hello 就能取得 JSON 回應。
3. Image 優化
Next.js 的 Image 元件自動處理圖片最佳化：
import Image from 'next/image';
function Profile() {
return (
<Image
src="/profile.jpg"
alt="個人照片"
width={200}
height={200}
// 自動：轉換格式（WebP）、調整大小、延遲載入
/>
);
}
Code language: JavaScript (javascript)4. Layout 系統
共用版型可以巢狀組合，避免重複程式碼：
// app/layout.tsx - 根版型（所有頁面共用）
export default function RootLayout({ children }) {
return (
<html>
<body>
<Header />
{children}
<Footer />
</body>
</html>
);
}
// app/blog/layout.tsx - 部落格專屬版型
export default function BlogLayout({ children }) {
return (
<div className="blog-container">
<Sidebar />
<main>{children}</main>
</div>
);
}
Code language: JavaScript (javascript)何時該用 Next.js？
適合使用 Next.js 的場景
| 場景 | 原因 |
|---|---|
| 需要 SEO | SSR/SSG 讓搜尋引擎能正確索引 |
| 公司官網、行銷網站 | 首次載入速度快，使用者體驗好 |
| 部落格、文件網站 | SSG 產生靜態頁面，效能極佳 |
| 電商網站 | 產品頁需要 SEO，結帳流程需要安全的後端 |
| 全端應用 | API Routes 可以處理後端邏輯 |
可能不需要 Next.js 的場景
| 場景 | 替代方案 |
|---|---|
| 純後台管理系統（不需要 SEO） | 純 React（Create React App 或 Vite） |
| 已有獨立後端 API | 視情況，但 Next.js 仍有路由優勢 |
| 極簡單的單頁應用 | 純 React 即可 |
| 需要 React Native 同構 | Expo Router 可能更適合 |
快速判斷流程
問題：我需要 SEO 嗎？
│
├─ 是 → 使用 Next.js
│
└─ 否 → 問題：我需要檔案式路由或 API Routes 嗎？
│
├─ 是 → 使用 Next.js
│
└─ 否 → 純 React 可能就夠了
Code language: CSS (css)重點回顧
- Next.js 是 React 的框架：提供路由、渲染策略、API 等開箱即用的功能
- 識別 Next.js 專案：看
app/目錄、page.tsx、layout.tsx、next.config.js - SSR vs SSG：
- SSR：每次請求即時產生，適合動態內容
- SSG：建置時產生，適合靜態內容
- 核心特色：檔案式路由、API Routes、Image 優化、Layout 系統
- 選擇時機：需要 SEO 或完整功能時選 Next.js，純後台可用純 React
下一步
在下一篇文章中，我們將實際建立一個 Next.js 專案，認識專案結構與開發流程。
延伸閱讀
進階測驗：Next.js 是什麼？為什麼選擇它？
測驗目標：驗證你是否能在實際情境中應用所學。
共 5 題，包含情境題與錯誤診斷題。
共 5 題，包含情境題與錯誤診斷題。
1. 選擇合適的渲染策略 情境題
你正在開發一個新聞網站，文章內容會即時更新，而且需要讓 Google 搜尋引擎能夠正確索引文章內容。你應該選擇哪種渲染方式？
2. 建立 API 端點 情境題
你需要在 Next.js 專案中建立一個 API 端點，讓前端可以透過
/api/users 取得使用者資料。你應該建立什麼檔案？
3. 專案技術選型 情境題
你的團隊要開發一個公司內部使用的後台管理系統，只有登入的員工可以使用，不需要被搜尋引擎索引。團隊對 React 很熟悉。你會建議使用什麼技術？
4. 路由設定問題 錯誤診斷
小明建立了以下的檔案結構，但訪問
/about 時卻顯示 404 錯誤：
app/
├── page.tsx
└── about/
└── index.tsx
最可能的問題是什麼？
5. 資料取得問題 錯誤診斷
小美寫了以下程式碼來取得商品資料，但發現頁面顯示的資料總是舊的，沒有反映最新的庫存變化：
// app/products/page.tsx
async function ProductsPage() {
const products = await fetch(‘https://api.example.com/products’);
return (
<ul>
{products.map(p => <li key={p.id}>{p.name}</li>)}
</ul>
);
}
最可能的原因是什麼？