nextjs-app-router

此技能為使用 Next.js 13+ App Router 架構開發網頁應用程式的開發人員提供專業協助。它專為希望利用現代 React 範式（包括伺服器元件 Server Components、用戶端元件 Client Components 和伺服器端渲染策略）的前端與全端工程師所設計。該助手能協助開發者駕馭基於目錄的路由系統、管理元件邊界，並使用非同步元件與緩存策略實作高效的數據獲取流程。它非常適合需要架構可擴展、SEO 友善應用程式的開發者，以實現高效的代碼分割、減小包大小並提供漸進式 UI 渲染。

• 提供 App Router 目錄結構（layout.tsx, page.tsx, route.ts）的架構指導。

• 實作 React Server Components 以減少用戶端 JavaScript 執行。

• 設定 Metadata、動態路由以及使用 generateStaticParams 的靜態站點生成 (SSG)。

• 整合使用 React Suspense 與加載狀態的串流與漸進式渲染。

• 使用 fetch、資料庫查詢 (Prisma/ORM) 與自定義緩存驗證的伺服器端數據獲取模式。

• 處理複雜 UI 需求，例如平行路由 (parallel routes)、攔截路由 (intercepting routes) 與錯誤邊界。

• 將舊版 Pages router 邏輯轉換為現代 App router 模式。

• 使用者應提供具體的元件需求、路由需求或性能瓶頸，以獲得最精確的代碼結構。

• 定義元件時，請明確說明邏輯是否需要交互式 Hook (useState, useEffect)，這將決定是否使用 'use client' 指令。

• 助手採用 Next.js 標準規範，可用於排除 Hydration 錯誤、緩存問題或中間件配置。

• 輸入通常涉及架構問題或代碼片段；輸出則提供慣用且高效的 React/Next.js 實作模式。

• 限制包括必須保持在 Next.js App Router 範式範圍內，避免在伺服器環境中使用過時的僅限用戶端模式，並遵守當前的穩定 React 18/19 標準。