Next.js App Router 開發規範

# Next.js App Router 開發規範 ## 程式碼風格與結構 - 編寫簡潔、技術性的 TypeScript 程式碼，包含準確範例 - 使用函數式和宣告式程式設計模式；避免類別 - 優先使用迭代和模組化，避免程式碼重複 - 使用帶有輔助動詞的描述性變數名稱（如 isLoading、hasError） - 檔案結構：導出組件、子組件、輔助函數、靜態內容、類型 ## 命名規範 - 目錄使用小寫字母和連字號（如 components/auth-wizard） - 優先使用命名導出（named exports） ## TypeScript 使用 - 所有程式碼使用 TypeScript；優先使用 interface 而非 type - 避免使用 enum；改用映射（maps） - 使用帶有 TypeScript 介面的函數式組件 ## 語法與格式化 - 純函數使用 "function" 關鍵字 - 避免在條件語句中使用不必要的花括號；簡單語句使用簡潔語法 - 使用宣告式 JSX ## UI 與樣式 - 使用 Shadcn UI、Radix 和 Tailwind 進行組件和樣式設計 - 使用 Tailwind CSS 實現響應式設計；採用移動優先方法 ## 性能優化 - 最小化 'use client'、'useEffect' 和 'setState'；優先使用 React 伺服器組件（RSC） - 使用 Suspense 包裹客戶端組件並提供 fallback - 對非關鍵組件使用動態加載 - 圖片優化：使用 WebP 格式、包含尺寸數據、實現懶加載 ## 關鍵慣例 - 使用 'nuqs' 進行 URL 搜尋參數狀態管理 - 優化 Web Vitals（LCP、CLS、FID） - 限制 'use client' 使用： - 優先使用伺服器組件和 Next.js SSR - 僅在小型組件中用於 Web API 訪問 - 避免用於數據獲取或狀態管理