nextjs-developer by 404kidwiz/claude-supercode-skills
npx skills add https://github.com/404kidwiz/claude-supercode-skills --skill nextjs-developer提供专业的 Next.js 开发专长,专注于 Next.js 14+、App Router、Server Components 和现代 React 模式。构建具有全栈能力、服务器操作和尖端 Next.js 功能的高性能、SEO 优化的 Web 应用程序。
在以下情况下调用此技能:
在以下情况下请勿调用:
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| 场景 | 组件类型 | 理由 | 示例 |
|---|---|---|---|
| 从数据库/API 获取数据 | Server Component | 无客户端 JS 包,直接服务器访问 | 产品列表页 |
| 具有状态的交互式表单 | Client Component | 需要 useState、事件处理程序 | 搜索过滤器、表单输入 |
| 无交互性的静态内容 | Server Component | 零 JS 发送到客户端,加载更快 | 博客文章内容、文档 |
| 使用钩子的第三方库 | Client Component | React 钩子仅在客户端工作 | 图表库、动画 |
| 受身份验证保护的内容 | Server Component | 服务器端安全令牌处理 | 用户仪表板数据获取 |
| 实时更新(WebSocket) | Client Component | 需要浏览器 API | 实时聊天、通知 |
| 布局包装器、导航 | Server Component(默认) | 减少客户端包大小 | 页眉、页脚、侧边栏 |
| 模态对话框、工具提示 | Client Component | 需要浏览器事件处理 | 确认对话框、下拉菜单 |
| SEO 关键内容 | Server Component | 服务器渲染的 HTML 供爬虫使用 | 产品描述、落地页 |
| 用户交互(点击、悬停) | Client Component | 需要事件监听器 | 按钮、标签页、手风琴 |
危险信号 → 升级至 oracle:
'use client' 指令感到困惑Next.js 项目架构
├─ 新项目(绿地项目)
│ └─ ✅ 始终使用 App Router(Next.js 13+)
│ • 现代 React Server Components
│ • 内置布局和嵌套路由
│ • 流式渲染和 Suspense 支持
│ • 更好的性能和开发者体验
│
├─ 现有的 Pages Router 项目
│ ├─ 小型项目(<10 个路由)
│ │ └─ 考虑迁移到 App Router
│ │ • 迁移工作量:1-3 天
│ │ • 好处:面向未来、性能更好
│ │
│ ├─ 大型项目(10+ 个路由,复杂)
│ │ ├─ 具有新功能的活跃开发中
│ │ │ └─ ✅ 增量迁移(推荐)
│ │ │ • 新路由 → App Router
│ │ │ • 遗留路由 → 保持 Pages Router
│ │ │ • 在多个冲刺中逐步迁移
│ │ │
│ │ └─ 维护模式(最小变更)
│ │ └─ ⚠️ 保持 Pages Router
│ │ • 迁移投资回报率太低
│ │ • 无需破坏性变更
│ │
│ └─ 大量使用 getServerSideProps/getStaticProps 模式
│ └─ ✅ 计划迁移但需彻底测试
│ • Server Components 替代 getServerSideProps
│ • generateStaticParams 替代 getStaticPaths
│ • 重构数据获取模式
│
└─ 团队经验
├─ 团队不熟悉 Server Components
│ └─ ⚠️ 迁移前需要培训
│ • 为学习曲线预留 1-2 周
│ • 从小的 App Router 功能开始
│
└─ 团队具有现代 React 经验
└─ ✅ 自信地使用 App Router
每周安装次数
65
仓库
GitHub Stars
42
首次出现
Jan 24, 2026
安全审计
安装于
opencode52
codex48
gemini-cli48
claude-code48
cursor43
github-copilot40
Provides expert Next.js development expertise specializing in Next.js 14+, App Router, Server Components, and modern React patterns. Builds high-performance, SEO-optimized web applications with full-stack capabilities, server actions, and cutting-edge Next.js features.
Invoke this skill when:
Do NOT invoke when:
| Scenario | Component Type | Reasoning | Example |
|---|---|---|---|
| Data fetching from database/API | Server Component | No client JS bundle, direct server access | Product listing page |
| Interactive forms with state | Client Component | Needs useState, event handlers | Search filters, form inputs |
| Static content with no interactivity | Server Component | Zero JS to client, faster load | Blog post content, docs |
| Third-party libraries using hooks | Client Component | React hooks only work client-side | Chart libraries, animations |
| Authentication-protected content | Server Component | Secure token handling server-side | User dashboard data fetch |
Red Flags → Escalate to oracle:
'use client' directiveNext.js Project Architecture
├─ New Project (greenfield)
│ └─ ✅ ALWAYS use App Router (Next.js 13+)
│ • Modern React Server Components
│ • Built-in layouts and nested routing
│ • Streaming and Suspense support
│ • Better performance and DX
│
├─ Existing Pages Router Project
│ ├─ Small project (<10 routes)
│ │ └─ Consider migrating to App Router
│ │ • Migration effort: 1-3 days
│ │ • Benefits: Future-proof, better performance
│ │
│ ├─ Large project (10+ routes, complex)
│ │ ├─ Active development with new features
│ │ │ └─ ✅ Incremental migration (recommended)
│ │ │ • New routes → App Router
│ │ │ • Legacy routes → Keep Pages Router
│ │ │ • Gradual migration over sprints
│ │ │
│ │ └─ Maintenance mode (minimal changes)
│ │ └─ ⚠️ Keep Pages Router
│ │ • Migration ROI too low
│ │ • No breaking changes needed
│ │
│ └─ Heavy use of getServerSideProps/getStaticProps patterns
│ └─ ✅ Plan migration but test thoroughly
│ • Server Components replace getServerSideProps
│ • generateStaticParams replaces getStaticPaths
│ • Refactor data fetching patterns
│
└─ Team Experience
├─ Team unfamiliar with Server Components
│ └─ ⚠️ Training required before migration
│ • Budget 1-2 weeks for learning curve
│ • Start with small App Router features
│
└─ Team experienced with modern React
└─ ✅ Proceed with App Router confidently
Weekly Installs
65
Repository
GitHub Stars
42
First Seen
Jan 24, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode52
codex48
gemini-cli48
claude-code48
cursor43
github-copilot40
Genkit JS 开发指南:AI 应用构建、错误排查与最佳实践
7,700 周安装
| Client Component |
| Browser APIs required |
| Live chat, notifications |
| Layout wrappers, navigation | Server Component (default) | Reduce client bundle size | Header, footer, sidebar |
| Modal dialogs, tooltips | Client Component | Needs browser event handling | Confirmation dialogs, dropdowns |
| SEO-critical content | Server Component | Server-rendered HTML for crawlers | Product descriptions, landing pages |
| User interactions (clicks, hover) | Client Component | Event listeners required | Buttons, tabs, accordions |