app-router

app-router 技能為使用 Next.js App Router 架構進行開發的開發者提供專業協助。它作為基於檔案系統路由的指南，確保開發者能正確遵循 React Server Components 和基於檔案的路由模式。此技能非常適合希望在擴展 Next.js 專案結構的同時，透過高效的路由區段定義來維持高效能的團隊或個人。

• 簡化了路由區段必要檔案慣例的建立，包括 page.tsx、layout.tsx、loading.tsx 和 error.tsx。
• 實作複雜的路由模式，例如動態路由 ([slug])、捕捉所有路徑區段 ([...slug])、路由群組 ((folder)) 以及平行路由 (@slot)。
• 提供有關管理靜態與動態 Metadata 的自動化指導，確保符合 SEO 要求及正確的產生模式。
• 運用 React Suspense 實作載入介面 (Loading UI) 與錯誤邊界 (Error Boundaries)，提升應用程式的強韌性。
• 透過遵循共置 (Colocation) 標準、私有資料夾模式 (_folder) 與攔截路由 (.) 來組織專案目錄。

使用說明：

• 當建立新路由時，只需提示該技能新增頁面或定義區段；它將根據標準 Next.js 慣例產生所需的檔案結構。
• 使用此技能將現有的 Pages Router 應用程式重構為 App Router 模型，以確保與 Server Components 的相容性。
• 非常適合除錯路由問題、識別設定錯誤的載入或錯誤狀態，以及管理複雜的巢狀版面配置。
• 預期的輸入包括路由路徑、預期的行為（例如動態參數）以及針對版面配置或 UI 狀態的功能需求。
• 此技能嚴格遵守 app/ 目錄限制，幫助開發者避免諸如將元件放置在無效路由區段等常見陷阱。