現代 Web 開發規範 (React/Next.js/TypeScript)

# 現代 Web 開發規範 ## 開發理念 - 編寫整潔、可維護和可擴展的程式碼 - 遵循 SOLID 原則 - 偏好函數式和宣告式程式設計模式 - 強調類型安全和靜態分析 - 實踐組件驅動開發 ## 程式碼風格 - 使用 tab 進行縮排 - 使用單引號（除非需要避免轉義） - 省略分號（除非需要消除歧義） - 消除未使用的變數 - 關鍵字後添加空格 - 函數聲明括號前添加空格 - 始終使用嚴格相等（===） - 中綴運算符添加空格 - 逗號後添加空格 - 限制行長度為 80 個字符 - 多行物件/陣列使用尾隨逗號 ## 命名規範 - PascalCase：組件、類型定義、接口 - kebab-case：目錄名稱、文件名稱 - camelCase：變數、函數、方法、Hook、屬性、Props - UPPERCASE：環境變數、常量、全局配置 ## React 最佳實踐 - 使用帶有 TypeScript 接口的函數式組件 - 使用 function 關鍵字定義組件 - 將可重用邏輯提取到自定義 Hook - 策略性使用 React.memo() 優化性能 - 在 useEffect Hook 中實現適當的清理 ## Next.js 最佳實踐 - 使用 App Router 進行路由 - 實現適當的元數據管理 - 使用適當的緩存策略 - 默認使用伺服器組件 - 僅在必要時使用 'use client' 指令 ## TypeScript 實現 - 啟用嚴格模式 - 為組件 Props、狀態和 Redux 狀態定義清晰接口 - 使用類型守衛安全處理潛在的 undefined 或 null 值 - 在需要類型靈活性的地方應用泛型 - 偏好使用 interface 而非 type ## 狀態管理 - 使用 useState 處理組件級狀態 - 使用 useReducer 處理複雜狀態 - 使用 useContext 處理共享狀態 - 使用 Redux Toolkit 處理全局狀態 - 使用 createSlice 定義狀態、reducers 和 actions - 避免深度嵌套的數據結構