跳轉至

建立 2026-09-16 更新 2026-09-16

Next.js 教學

Next.js（唸法接近「Next-Jay-Ess」）是目前最主流的 React 全端框架，由 Vercel 維護。它把路由、伺服器端渲染、資料抓取、打包與部署整合成一套完整方案，讓你不用自己拼裝一堆工具，就能寫出效能好、SEO 友善又容易部署的網站與應用程式。

本站聚焦 App Router（Next.js 13 之後的主流架構），依序介紹入門設定、路由與導覽、渲染與資料抓取、樣式設計、API 路由與部署上線。

最重要的 20%

Next.js 功能很多，但真正每天會用到、決定你寫法的核心觀念其實不多：

  • 檔案系統路由　app/ 資料夾底下的路徑結構就是網址結構；page.tsx、layout.tsx、loading.tsx、error.tsx 等特殊檔名分別代表頁面、共用外框、載入狀態與錯誤畫面。
  • Server Components 與 Client Components　元件預設在伺服器端執行、不送 JavaScript 給瀏覽器；需要互動（useState、事件處理、瀏覽器 API）時才加上 "use client"。
  • 資料抓取與快取　Server Component 可以直接 async/await 抓資料，Next.js 會依 fetch 的快取設定決定要靜態產生還是即時渲染。
  • 樣式方案　全域 CSS、CSS Modules、Tailwind CSS 三種主流做法，依專案規模挑選。
  • Route Handlers　app/api/**/route.ts 讓你直接在同一個專案裡寫後端 API，不用另外架伺服器。
  • 部署上線　next build 產出最佳化後的應用程式；推上 GitHub 並連接 Vercel，即可自動建置、預覽與上線。

掌握以上六點，就能看懂並寫出大部分實務上的 Next.js 專案。

快速開始

安裝 Node.js（18.18 以上）後，用官方鷹架建立新專案：

npx create-next-app@latest my-app
cd my-app
npm run dev

瀏覽器開啟 http://localhost:3000 即可看到畫面。詳細安裝選項與專案結構說明見 安裝與專案結構。

推薦影音

Next.js 快速總覽

簡述：Fireship 用 100 秒濃縮 Next.js 的核心賣點，後段接一段完整的新手教學，適合第一次接觸、想快速抓住全貌時先看。

官方免費課程

Learn Next.js 是 Vercel 官方的互動式教學，透過建立一個財務儀表板專案，實際走過路由、資料庫、資料抓取與驗證等主題，適合想跟著官方步驟動手做的學習者。

Vercel Academy — Next.js Foundations 則提供更完整的分章節課程，涵蓋基礎設定到進階模式與部署，適合想有系統地從頭學到尾的學習者。

學習路徑

想認識唯客學院，請看 關於我們。