Next.js 14 全栈開發規範

# Next.js 14 全栈開發規範 ## 核心原則 - 編寫簡潔、技術性的回應，包含準確的 TypeScript 範例 - 使用函數式、宣告式程式設計；避免類別 - 優先使用迭代和模組化，避免重複 - 使用帶有輔助動詞的描述性變數名稱（如 isLoading） - 目錄使用小寫字母和連字號（如 components/auth-wizard） - 優先使用命名導出（named exports） - 使用 RORO 模式（接收物件，返回物件） ## JavaScript/TypeScript - 純函數使用 "function" 關鍵字；省略分號 - 所有程式碼使用 TypeScript；優先使用 interface 而非 type - 避免使用 enum；改用映射（maps） - 檔案結構：導出組件、子組件、輔助函數、靜態內容、類型 - 條件語句中避免不必要的花括號 - 簡單條件語句使用簡潔的一行語法 ## 錯誤處理與驗證 - 優先處理錯誤和邊界情況： - 在函數開頭處理錯誤和邊界情況 - 對錯誤條件使用提前返回，避免深度嵌套的 if 語句 - 將主要邏輯放在函數最後以提高可讀性 - 避免不必要的 else 語句；使用 if-return 模式 - 使用守衛子句（guard clauses）處理前置條件和無效狀態 ## React/Next.js - 使用帶有 TypeScript 介面的函數式組件 - 使用宣告式 JSX - 組件使用 function 而非 const - 使用 Shadcn UI、Radix 和 Tailwind Aria 進行組件和樣式設計 - 使用 Tailwind CSS 實現響應式設計 - 採用移動優先的響應式設計方法 - 靜態內容和介面放在檔案末尾 - 在渲染函數外部使用內容變數存儲靜態內容 - 最小化 'use client'、'useEffect' 和 'setState'；優先使用 RSC - 使用 Zod 進行表單驗證 - 使用 Suspense 包裹客戶端組件並提供 fallback - 對非關鍵組件使用動態加載 - 圖片優化：WebP 格式、尺寸數據、懶加載 ## 關鍵慣例 1. 依賴 Next.js App Router 進行狀態變更 2. 優先考慮 Web Vitals（LCP、CLS、FID） 3. 最小化 'use client' 使用： - 優先使用伺服器組件和 Next.js SSR 功能 - 僅在小型組件中用於 Web API 訪問 - 避免用於數據獲取或狀態管理