Community寫作與編輯github.com

LeahyCC/claude-skills

建置、審查或遷移 Next.js App Router 應用程式,支援版本感知的元件邊界、資料擷取、快取、路由和變更。適用於 App Router 的實作與架構任務,不適用於一般的 React 最佳化、純文字編輯,或無關遷移的 Pages Router 修正。

claude-skills 是什麼?

此技能專為使用 Next.js App Router 的開發者設計,協助建置、審查和遷移應用程式。它能感知專案中實際安裝的 Next.js 與 React 版本,避免盲目升級或採用不相容的功能。技能涵蓋伺服器元件邊界、資料擷取、快取模式、路由設計、錯誤處理、SEO 中繼資料、資產設定,以及從 Pages Router 遷移到 App Router 的最佳路徑。 支援的平台包括 Claude Code、Cursor 和 Codex 等具備工具使用能力的 AI 代理。其運作方式是先讀取專案的 package.json、鎖定檔、路由結構和設定檔,確認版本與執行環境,接著根據任務類型選取對應的官方資源或內建文件,最後透過類型檢查、lint 和建置命令驗證變更的正確性。此技能特別強調安全與正確性:保護機密資料、在資料附近進行授權、避免通用快取洩漏個人資訊,並要求開發者區分可選的改善與必須修正的錯誤。

相容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/LeahyCC/claude-skills/tree/HEAD/skills/nextjs-app-router

Installed? Explore more 寫作與編輯 skills: steipete/notion, langchain-ai/langchain, bytedance/podcast-generation · View all 6 →

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

Next.js App Router

保留應用程式支援的版本和設定。在合適的情況下,優先使用伺服端渲染和直接伺服器讀取;在需要互動和即時瀏覽器行為的地方則維持用戶端處理。

建立上下文

檢查 package.json、鎖定檔、路由資料夾、next.config.* 和專案說明。識別已安裝的 Next.js/React 版本、App 或 Pages Router、執行時期/部署限制,以及是否啟用了 Cache Components。在 monorepo 中,從受影響的應用程式解析這些資訊。不要為了符合範例而升級套件或啟用功能。

在 Next.js 16.2+ 上,優先使用版本匹配的內建文件(位於 node_modules/next/dist/docs/)。否則,請查閱所支援版本的官方文件。即時文件可能描述較新的次要版本;使用前請確認 API 版本歷史和設定。區分穩定 API、實驗選項、棄用功能和專案慣例。

選擇相關資源

僅讀取任務所需的資源;當版本或行為不確定時,請跟隨其官方連結。

任務資源
伺服器/用戶端邊界、組成、序列化伺服器元件
讀取、串流、瀏覽器資料、動作、HTTP 端點資料擷取
現有快取模式、Cache Components、私有/遠端快取、失效快取
佈局、動態路由、搜尋、平行/攔截路由路由
請求重新導向/改寫和樂觀授權閘道代理
預期錯誤、載入、復原、404 回應語意錯誤處理
中繼資料匯出、繼承和 SEO 整合中繼資料
圖片/字型設定和載入取捨資產
從 Pages 遷移到 App 的漸進式遷移遷移
審慎的主要/次要升級版本變更

優先決策

  1. 保護機密和使用者資料。在資料附近進行身分驗證和授權讀取/變更,驗證未受信任的輸入,並確保個人資料不會進入錯誤共用的快取。代理和使用者介面可見性不足以作為授權。
  2. 跨版本和渲染模式保持正確性。非同步請求 API、快取先決條件、路由慣例和復原屬性皆取決於已安裝的版本/設定。
  3. 消除已展示的水流瀑布和不必要的用戶端程式碼。平行化獨立工作;選擇能保留有用 UI 的 Suspense 邊界。對於輪詢、僅瀏覽器狀態和互動更新,用戶端擷取仍然是合適的。
  4. 根據新鮮度、部署和測量行為調整快取、預先擷取和資產提示。這些是選擇,而非每個 App Router 應用程式的先決條件。

使用伺服器元件進行僅限伺服器的工作。在有用的模組邊界新增 'use client' 以實現互動;它不必是葉節點。在合適的情況下,使用伺服器動作進行 UI 變更,或使用路由處理器處理 HTTP 合約(包括瀏覽器用戶端)。兩者都不能取代授權。

驗證實際變更

在可用時執行受影響應用程式的現有類型檢查、lint 和建置命令。測試可能失敗的行為:已驗證的直接請求、跨使用者隔離、變更後的新鮮度、硬/軟導航、錯誤和載入。當匯入、輔助驗證或持久化機制僅為佔位符時,不要將片段標記為可供生產使用。說明已執行哪些測試以及哪些尚未測試。

對於審查,應優先指出可操作的失敗及其版本/設定範圍。將可選的改善與正確性問題分開。對於實作,說明所選的邊界/快取模式、變更的行為和驗證方式。

原始碼審查是有限範圍的,並非全面認證。請參閱 SOURCES.md 以取得規範連結、適用的版本/設定、檢查的章節、上游日期和最新政策。儲存庫的試點審查/評估記錄是維護證據,執行時期不需要。

相關技能