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 與請求記憶化
• Data Cache 基礎
• Route Cache 配置
• Router Cache 與緩存失效
• 重新驗證策略：按需與基於時間
• 流式數據模式

認證與授權

• Next.js 中的認證架構
• 會話管理模式
• 基於 JWT 的認證流程
• OAuth 集成策略
• 基於角色的訪問控制實現
• 基於中間件的路由保護

數據庫集成與 ORM

• 數據庫架構考量
• Next.js 與 PostgreSQL 集成
• 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 應用中的常見設計模式
• 多租戶應用架構
• 結業項目演練
• 課程回顧與問答環節