nextjs-15-specialist
正確實作 Next.js 15 App Router 模式
Next.js 15 引入了新的模式，容易被用錯。此技能提供 App Router、Server Components、Server Actions 與快取策略的完整指引，讓代理一次就能正確建置。
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“nextjs-15-specialist”。 Create a Server Action that creates a new project with name and description fields.
预期结果:
- Server Action: createProject(formData)
- - Validates input with Zod schema
- - Creates project in database
- - Revalidates /projects path
- - Returns success with created project
- - Includes authentication check
- - Handles errors with try-catch
正在使用“nextjs-15-specialist”。 Convert this page to use proper cache strategy. It should refresh product data every hour.
预期结果:
- Update fetch() with revalidate option
- cache: 'force-cache' for base caching
- next: { revalidate: 3600 } for hourly refresh
- Add revalidateTag for manual invalidation
- Document cache behavior in comments
安全审计
低风险Documentation-only skill containing markdown guides and a Python static analyzer validator. The 786 static findings are all false positives triggered by code examples in documentation. The validate-patterns.py script only reads files for pattern validation, with no network calls, credential access, or code execution capabilities. All 'backtick execution' detections are markdown code fences, not Ruby shell commands. All 'fetch' and 'URL' detections are documentation examples, not runtime network calls.
低风险问题 (1)
风险因素
📁 文件系统访问 (1)
⚡ 包含脚本 (1)
⚙️ 外部命令 (2)
🌐 网络访问 (2)
质量评分
你能构建什么
建置 Next.js 15 應用程式
從一開始就以正確的 App Router 模式建立新的 Next.js 15 應用程式。
實作伺服器端變更
建立具備適當驗證、驗證機制與錯誤處理的 Server Actions。
最佳化資料擷取
設定快取策略、重新驗證與串流以獲得最佳效能。
试试这些提示
Create a new Next.js 15 page at /projects that fetches and displays a list of projects using Server Components.
Create a Client Component that allows users to delete a project using a Server Action with proper loading and error states.
Add proper caching to our product pages. Products should be cached for 1 hour and revalidated when inventory updates.
Add dynamic metadata to our blog post pages including Open Graph images, Twitter cards, and JSON-LD structured data.
最佳实践
- 預設使用 Server Components，只有在需要互動性時才加入 'use client'
- 對 fetch 呼叫一律指定快取策略（force-cache、no-store 或 revalidate）
- Server Action 驗證使用 Zod 並清理所有使用者輸入
- 實作適當的 error boundary 與 loading state 以提升使用者體驗
避免
- Async Client Components - 會造成建置錯誤與效能問題
- 使用 <img> 取代 next/image 的 <Image> - 會破壞建置與最佳化
- fetch 呼叫缺少快取策略 - 快取行為不可預期
- Server Actions 未做驗證檢查 - 安全性漏洞
常见问题
此技能涵蓋哪些 Next.js 15 功能？
包含多少程式碼範例？
此技能可以修改我的程式碼庫嗎？
使用驗證器時我的資料安全嗎？
為什麼我會收到 'useState is not valid in Server Components'？
這與 Next.js 14 模式相比如何？
开发者详情
许可证
MIT
引用
main