Next.js 16 進階開發培訓

Next.js 16 概覽與進階架構

• Next.js 16.x 的關鍵功能與變更
• App Router 架構與設計原則
• Server Components 與 Client Components 之對比
• 渲染策略：SSR、SSG、ISR 及串流
• 專案結構慣例與最佳實踐
• 以效能為首要的應用程式設計

進階路由與導航

• 巢狀版面與共用 UI 模式
• 用於組織路由的路由群組
• 用於獨立路由區段的平行路由
• 攔截路由與彈窗式導航
• 動態路由與萬用字元區段
• 用於自訂端點的處理程式
• 用於請求攔截的中間件

React Server Components 與伺服器功能

• 深入探討 React Server Components 模型
• 在伺服器上擷取資料
• 具備 Suspense 邊界的串流 UI
• 錯誤邊界與錯誤處理
• 載入中 UI 模式
• 部分渲染與選擇性重新渲染

Server Actions 與表單

• Server Actions 架構與功能
• 使用伺服器端處理的表單處理
• 驗證策略
• 樂觀式 UI 更新
• 載入中狀態與使用者回饋
• 檔案上傳與漸進式增強

進階資料擷取與快取

• Next.js 中的 Fetch API 與請求備份（memoization）
• Data Cache 基礎知識
• Route Cache 設定
• Router Cache 與快取無效化
• 重新驗證策略：按需與基於時間
• 串流資料模式

身份驗證與授權

• Next.js 中的身份驗證架構
• 工作階段管理模式
• 基於 JWT 的身份驗證流程
• OAuth 整合策略
• 基於角色的存取控制 (RBAC) 實作
• 基於中間件的路由保護

資料庫整合與 ORM

• 資料庫架構考量
• PostgreSQL 與 Next.js 的整合
• Prisma ORM 設定與查詢
• Drizzle ORM 概覽與遷移
• 連接集區設定
• 資料庫遷移策略
• 用於資料存取的儲存庫模式

API 開發

• 路由處理程式與 API 路由慣例
• RESTful API 實作
• API 請求驗證
• 錯誤處理與回應格式化
• 檔案上傳端點
• Webhook 整合與驗證
• 速率限制與 API 安全性

效能最佳化

• 套件分析與最佳化
• 程式碼分割策略
• 用於按需載入的動態匯入
• 影像元件最佳化
• 使用 next/font 的字型最佳化
• 延遲載入模式
• 核心網頁指標 (Core Web Vitals) 最佳化技術

測試 Next.js 應用程式

• 伺服器與用戶端程式的單元測試策略
• 使用測試公用程式的元件測試
• 用於完整資料流程的整合測試
• 使用 Playwright 或 Cypress 進行端到端測試
• 模擬 API 與服務
• 測試 Server Components
• 測試 Server Actions

部署、DevOps 與監控

• 生產環境建構設定
• 環境變數管理
• Next.js 的 Docker 容器化
• CI/CD 管線設定
• 應用程式監控與紀錄
• 錯誤追蹤與回報
• 生產環境中的效能監控

進階模式與綜合專案

• 用於擴充性的專案架構模式
• 功能組織與模組邊界
• Next.js 應用程式中的常見設計模式
• 多租戶應用程式架構
• 綜合專案逐步解說
• 課程回顧與問答環節