Next.js 16 進階開發培訓

Next.js 16 概覽與進階架構

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

進階路由與導航

• 巢狀佈局與共用 UI 模式
• 用於組織路由的路由群組
• 用於獨立路由片段的平行路由
• 攔截路由與模態導航
• 動態路由與全捕獲片段
• 用於自定義端點的 Route Handlers
• 用於請求攔截的 Middleware

React Server Components 與 Server 功能

• 深入探討 React Server Components 模型
• 在伺服器上獲取資料
• 利用 Suspense boundary 實現 UI 串流
• Error boundaries 與錯誤處理
• 載入 UI 模式
• 部分渲染與選擇性重新渲染

Server Actions 與表單

• Server Actions 架構與功能
• 透過伺服器端處理進行表單管理
• 驗證策略
• 樂觀 UI 更新
• 等待狀態與使用者回饋
• 檔案上傳與漸進增強

進階資料獲取與快取

• Next.js 中的 Fetch API 與請求記憶化
• Data Cache 基礎知識
• Route Cache 設定
• Router Cache 與快取失效
• 重新驗證策略：按需與定時
• 串流資料模式

身份驗證與授權

• Next.js 中的身份驗證架構
• Session 管理模式
• 基於 JWT 的身份驗證流程
• OAuth 整合策略
• 基於角色的存取控制實作
• 基於 Middleware 的路由保護

資料庫整合與 ORM

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

API 開發

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

效能優化

• 捆綁包分析與優化
• 程式碼分割策略
• 動態導入以實現按需載入
• Image 元件優化
• 利用 next/font 優化字型
• 延遲載入模式
• Core Web Vitals 優化技術

測試 Next.js 應用程式

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

部署、DevOps 與監控

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

進階模式與總合專案

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