Next.js Developer
技能 已验证 活跃Use when building Next.js 14+ applications with App Router, server components, or server actions. Invoke to configure route handlers, implement middleware, set up API routes, add streaming SSR, write generateMetadata for SEO, scaffold loading.tsx/error.tsx boundaries, or deploy to Vercel. Triggers on: Next.js, Next.js 14, App Router, RSC, use server, Server Components, Server Actions, React Server Components, generateMetadata, loading.tsx, Next.js deployment, Vercel, Next.js performance.
To empower developers building Next.js 14+ applications with best practices, efficient workflows, and code examples for modern features like App Router and Server Components.
功能
- Configure route handlers and API routes
- Implement Next.js App Router with layouts and routing
- Scaffold Server Components and Server Actions
- Optimize data fetching, caching, and SSR
- Generate SEO metadata and optimize assets
- Guide deployment to Vercel and self-hosting
使用场景
- Building new Next.js 14+ applications using the App Router
- Implementing Server Components and Server Actions for full-stack features
- Optimizing Next.js application performance and SEO
- Configuring deployment pipelines for Next.js projects
非目标
- Developing applications with the Next.js Pages Router
- Client-side component state management outside of necessary interactivity
- Replacing core Next.js functionality or the underlying framework
工作流
- Architecture planning for Next.js apps
- Implementing routing with App Router
- Setting up data fetching and server components
- Optimizing performance and SEO
- Validating and deploying to production
实践
- App Router Architecture
- Server Component Patterns
- Server Action Best Practices
- Data Fetching & Caching Strategies
- Deployment & Production Optimization
- SEO Best Practices
先决条件
- Node.js 18+
- Next.js 14+ project context
安装
请先添加 Marketplace
/plugin marketplace add jeffallan/claude-skills/plugin install claude-skills@fullstack-dev-skills质量评分
已验证类似扩展
Type Audit
100Typography-only audit covering font selection, type scale, readability, hierarchy, performance
React Modernization
99Upgrade React applications to latest versions, migrate from class components to hooks, and adopt concurrent features. Use when modernizing React codebases, migrating to React Hooks, or upgrading to latest React versions.
Brand Landingpage
99Brand-first landing page designer — interviews the user to discover brand identity (adjectives, colors, typography, shape language), then generates and iterates on a polished landing page via Stitch with deployment-ready HTML output. Preferred over frontend-design for standalone landing/marketing pages where the user hasn't established visual direction yet. TRIGGER when: user asks to "create/design/build a landing page", "make a homepage for my project/product/service", "build a marketing page", or wants to promote an app/side project. Especially when they haven't defined brand colors, fonts, or visual style — the guided brand interview is the core value. DO NOT TRIGGER when: user has a specific design mockup to implement, wants a dashboard or app UI, needs component-level frontend work (buttons, forms, navbars), is building a multi-page application, or is restyling an existing page with known design tokens. Use frontend-design for those cases.
前端设计
99通过高设计质量创建独特、生产级的面向接口。当用户要求构建 Web 组件、页面或应用程序时，请使用此技能。生成富有创意、精美的代码，避免通用的 AI 美学。
Shadcn/ui Component Library
99shadcn/ui component library for React with Tailwind CSS - copy-paste accessible components with full code ownership
Performance
99优化网站性能，实现更快的加载速度和更好的用户体验。当用户要求“加速我的网站”、“优化性能”、“减少加载时间”、“修复加载缓慢”、“提升页面速度”或“性能审计”时使用。