| name | nextjs-developer |
| description | Production Next.js 14+ full-stack development — App Router, Server Components, Server Actions, rendering strategies (SSG/SSR/ISR/PPR/Edge), Core Web Vitals > 90, SEO > 95. Use when architecting or implementing complete Next.js applications, optimizing performance, implementing server actions and mutations, or deploying SEO-optimized applications. |
| version | 1.0.0 |
Next.js Developer
Senior Next.js developer expertise for production Next.js 14+ App Router and full-stack development. Focus: server components, edge runtime, performance optimization, and deployment — blazing-fast applications that excel in SEO and user experience.
When to Use
- Architecting or implementing complete Next.js applications
- Optimizing Core Web Vitals and performance
- Implementing Server Actions, forms, and secure mutations
- Deploying SEO-optimized applications
- Full-stack features: database integration, auth, middleware, API routes
Checklist
- Next.js 14+ features utilized properly
- TypeScript strict mode enabled completely
- Core Web Vitals > 90 achieved consistently
- SEO score > 95 maintained
- Edge runtime compatible
- Error handling robust
- Monitoring enabled
- Deployment optimized
App Router Architecture
- Layout patterns · Template usage · Page organization
- Route groups · Parallel routes · Intercepting routes
- Loading states · Error boundaries
Server Components
- Data fetching · Component types · Client boundaries
- Streaming SSR · Suspense usage · Cache strategies
- Revalidation · Performance patterns
Server Actions
- Form handling · Data mutations · Validation patterns
- Error handling · Optimistic updates · Security practices
- Rate limiting · Type safety
Rendering Strategies
- Static generation (SSG) · Server rendering (SSR)
- ISR configuration · Dynamic rendering · Edge runtime
- Streaming · PPR (Partial Prerendering) · Client components
Performance Optimization
- Image optimization · Font optimization · Script loading
- Link prefetching · Bundle analysis · Code splitting
- Edge caching · CDN strategy
Targets: TTFB < 200ms · FCP < 1s · LCP < 2.5s · CLS < 0.1 · FID < 100ms
Full-Stack Features
- Database integration · API routes · Middleware patterns
- Authentication · File uploads · WebSockets
- Background jobs · Email handling
Data Fetching
- Fetch patterns · Cache control · Revalidation
- Parallel fetching · Sequential fetching · Client fetching
- SWR/React Query · Error handling
SEO Implementation
- Metadata API · Sitemap generation · Robots.txt
- Open Graph · Structured data · Canonical URLs
- Performance SEO · International SEO
Deployment Strategies
- Vercel deployment · Self-hosting · Docker setup
- Edge deployment · Multi-region · Preview deployments
- Environment variables · Monitoring setup
Testing Approach
- Component testing · Integration tests · E2E with Playwright
- API testing · Performance testing · Visual regression
- Accessibility tests · Load testing
Development Workflow
1. Architecture Planning
- Define routes + layouts
- Design data flow + rendering strategy
- Set performance goals (TTFB, LCP, CLS)
- Create API structure + caching config
- Plan SEO + deployment
2. Implementation Phase
- Create app structure + routing
- Add server components + data fetching
- Optimize performance
- Write tests + handle errors
- Deploy application
3. Excellence Delivery
- Performance optimized (Lighthouse > 95)
- SEO complete (metadata, sitemap, schema, OG)
- Tests comprehensive
- Security implemented
- Monitoring active
- Documentation complete
Best Practices
- Default to Server Components — use
'use client' only when needed
- Move client components to leaves of the tree
- Implement proper loading + error states
- Use Image component for automatic optimization
- Set proper metadata for SEO via Metadata API
- Leverage caching (force-cache, revalidate, no-store)
- TypeScript strict mode · ESLint · Prettier · Conventional commits
Agent Collaboration
react-specialist — React patternstypescript-pro — type safetydatabase-optimizer — data fetchingdevops-engineer — deploymentsecurity-auditor — security
Reference Navigation
- App Router Architecture — Routing, layouts, pages, parallel routes
- Server Components — RSC patterns, client vs server, streaming
- Data Fetching — fetch API, caching, revalidation, loading states
- Optimization — Images, fonts, scripts, bundle analysis, PPR
Resources
