Next.js 編程 教學課程

上門編程教學課程內容

課程簡介

本課程專為希望快速掌握 Next.js 的前端與全端開發者設計，三小時內完整導入 React + Next.js 現代網頁開發架構，從核心概念到實際專案建立，帶領學員完成一個具備前後端整合的動態網站。

Next.js 是由 Vercel 推出的 React 全端框架，整合 前端渲染（SSR/SSG）、API Route 與 自動路由管理，並支援 TypeScript、Tailwind CSS 及各類部署平台。
本課程將從零開始建立一個 Next.js 專案，學習頁面設計、資料抓取、狀態管理與部署流程，協助學員打造能真實上線的高效應用網站。

 

適合對象：

• 具 React 基礎的前端工程師

• 想轉型為全端開發者的技術新手

• 想學習 Server-Side Rendering（SSR）與 Static Generation 的開發者

• 內容網站、部落格、Dashboard 等商業級應用開發者

學習成果：

• 理解 Next.js 架構、專案結構與運作流程

• 掌握頁面導向、佈局與元件設計原則

• 能撰寫 SSR / SSG / CSR 的資料載入流程

• 使用 Next.js API Routes 建立簡易伺服端功能

• 瞭解部署與最佳化實務流程（Vercel / Netlify）

---

 

課程時長

3 小時（180 分鐘）
理論講解與實作比例約 3 : 7

---

 

課程大綱

第一部份：Next.js 架構與環境建置（30 分鐘）

• 認識 Next.js：與 React、CRA 的差異

• SSR、SSG、ISR 的功能與應用場景

• 安裝環境（Node.js + Next.js CLI）

• 專案目錄結構與設定（pages、components、public）

• 實作：建立第一個 Next.js 專案並啟動開發伺服器

---

第二部份：頁面與路由基礎（40 分鐘）

• 自動路由系統與動態路由（Dynamic Routing）

• Link、useRouter 與頁面導覽操作

• Layout 組件與共用頁面設計

• 靜態與動態路由實作：[id].js 範例

• 實作練習：建立多頁式網站（首頁＋關於頁＋文章頁）

---

第三部份：資料抓取與渲染模式（40 分鐘）

• 了解 CSR / SSR / SSG / ISR 四種渲染模式

• getStaticProps()、getServerSideProps()、getStaticPaths() 實作

• 從外部 API 抓取資料並渲染內容

• 捕捉錯誤與條件處理技巧

• 實作範例：串接公開 API 顯示即時資料（如文章清單、商品列表）

---

第四部份：API Routes 與伺服端整合（40 分鐘）

• Next.js 內建 API Routes 概念與用途

• 建立 /api/ 路由處理伺服端邏輯

• POST / GET 請求實作

• 結合前端 Fetch，建立互動式資料功能

• 實作練習：留言系統 / 表單提交功能範例

---

第五部份：部署、樣式與延伸應用（30 分鐘）

• Next.js 與 CSS Module / SCSS / Tailwind CSS 整合

• 頁面最佳化與 Image Component 應用

• Meta / SEO 設定與 Head 元件

• 自動部署到 Vercel 平台流程

• 延伸議題：Next.js 14 App Router、Server Actions、Authentication

---

 

課程特色

• 三小時掌握 Next.js 全端框架的核心概念與實務技術。

• 由 React 擴展至 Server-Side 應用的完整思維轉換。

• 透過專案實作學習頁面、資料與 API 整合流程。

• 實戰導向設計，課後可獨立開發可部署的網站應用。