modern-best-practice-nextjs

此技能為開發現代 Next.js 網頁應用程式提供了全面的框架，特別著重於 App Router 架構。專為需要構建可擴展、SEO 友好且易於維護的 React 應用程式的軟體工程師與全端開發人員設計。本指南強調現代效能模式，例如優先使用伺服器組件 (Server Components) 以減少客戶端 JavaScript，利用 Server Actions 進行安全的資料變更，以及實施避開過時 useEffect 模式的高效資料獲取策略。透過整合此技能，開發人員可確保其程式碼庫遵守有關目錄結構、路由組與版面配置組合的業界標準規範。這對於從 Pages Router 遷移的團隊，或是希望標準化新 Next.js 專案以提升開發者體驗與執行效能的團隊特別有用。

• 實作 App Router 模式，包括版面配置巢狀結構、路由組以及載入中與錯誤邊界狀態。

• 深度整合 React 伺服器組件 (RSC) 以優化頁面初始載入並縮小客戶端套件大小。

• 使用 Server Actions 及 React Hook (如 useActionState) 的安全且聲明式的資料變更模式。

• 實作 Metadata API 以確保在動態與靜態路由間具備強大的 SEO 與內容可發現性。

• 策略性使用 Suspense 邊界來有效處理非同步 UI 轉換。

• 優先使用原生 Next.js 原語；避免在 useEffect 或客戶端 fetch 呼叫內部進行手動資料獲取。

• 盡可能優先使用靜態元資料而非動態元資料，以降低伺服器負載，維持高品質程式碼。

• 使用如 loading.tsx 與 error.tsx 的診斷模式，提升路由級別的使用者體驗與穩健性。

• 建議用於 Next.js 13+ 並使用 App Router 的專案；由於框架更新迅速，請務必隨時參考最新官方文件。

• 輸入：業務邏輯需求、UI/UX 規格與 API 資料結構。輸出：乾淨、高效能且具型別安全的 Next.js 原始程式碼。