技能 nextjs-app-router-patterns
⚡
nextjs-app-router-patterns
安全 🌐
網路存取⚙️
外部命令🔑
環境變數
套用 Next.js App Router 模式
App Router 功能可能難以結構化和選擇。本技能為 Next.js 14+ 路由、資料獲取和伺服器元件提供清晰的模式和範例。
支援: Claude Codex Code(CC)
1
下載技能 ZIP
2
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
3
開啟並開始使用
測試它
正在使用「nextjs-app-router-patterns」。 Show a simple plan for a product page with streaming and caching.
預期結果:
- Use a server component for the product header so it renders first
- Wrap reviews and recommendations in Suspense with loading UI
- Apply tag based revalidation on product fetches for controlled cache refresh
安全審計
安全v4 • 1/17/2026
Pure documentation skill containing only markdown explanations and TypeScript code examples. No executable scripts, network calls, filesystem access, or external commands are implemented. All code is illustrative documentation for Next.js App Router patterns.
2
已掃描檔案
721
分析行數
3
發現項
4
審計總數
風險因素
🌐 網路存取 (11)
⚙️ 外部命令 (23)
SKILL.md:33-44 SKILL.md:44-48 SKILL.md:48-92 SKILL.md:92-98 SKILL.md:98-137 SKILL.md:137-158 SKILL.md:158-162 SKILL.md:162-196 SKILL.md:196-200 SKILL.md:200-243 SKILL.md:243-245 SKILL.md:245-249 SKILL.md:249-285 SKILL.md:285-289 SKILL.md:289-352 SKILL.md:352-356 SKILL.md:356-398 SKILL.md:398-402 SKILL.md:402-445 SKILL.md:445-449 SKILL.md:449-494 SKILL.md:494-500 SKILL.md:500-522
🔑 環境變數 (2)
審計者: claude 查看審計歷史 →
品質評分
38
架構
100
可維護性
81
內容
22
社群
100
安全
87
規範符合性
你能建構什麼
開始 App Router 建置
在新的 Next.js 14+ 應用程式中獲得佈局、載入狀態和資料獲取的清晰結構。
規劃路由架構
為儀表板和複雜流程設計平行和攔截路由，實現一致的載入 UI。
最佳化資料獲取
為產品列表和詳細頁面選擇快取和重新驗證策略。
試試這些提示
App Router 基礎
說明核心 App Router 檔案慣例，以及何時使用伺服器元件與客戶端元件。
新增 Server Actions
提供一個 Server Actions 模式，用於將商品加入購物車，包含重新驗證和重新導向。
平行路由規劃
為分析和團隊面板建議一個帶有載入狀態的平行路由結構。
進階快取
為產品列表和詳細頁面推薦快取和重新驗證選擇，並使用標籤失效。
最佳實務
- 從伺服器元件開始，僅在需要時新增客戶端功能
- 將資料獲取與使用它的元件放在一起
- 使用 Suspense 邊界來啟用串流和清晰的載入狀態
避免
- 在沒有伺服器回退的客戶端元件中獲取關鍵資料
- 過度巢狀化佈局而膨脹渲染樹
- 為慢速資料來源跳過載入狀態
常見問題
這是否與 Next.js 14 和 15 相容
是的。它針對 App Router 模式，這些模式在 Next.js 14 和 15 中保持相容。
這個技能的限制是什麼
它提供指導和範例，但不會執行程式碼或建置專案。
我可以在現有的 App Router 應用程式中使用這個嗎
是的。你可以將這些模式逐步應用到目前的結構中。
它會存取我的資料或檔案嗎
不。它僅提供指導，不會存取本地資料。
如果模式與我的設定衝突怎麼辦
分享你的限制並請求針對你的設定量身定制的模式變體。
這與官方文件相比如何
它總結並組織帶有範例的模式。官方文件仍然是主要參考來源。