nextjs-developer_skill

Overview

This skill helps build production-grade Next.js 14+ applications using the App Router, server components, and server actions. It focuses on architecture, performance optimization, SEO via the Metadata API, and reliable deployment patterns for Vercel or self-hosted environments.

How this skill works

I inspect your app requirements and recommend an App Router structure, server/component split, and data layer patterns. I provide concrete templates: route/layout organization, TypeScript config, server actions for mutations, next.config.js optimizations, and deployment steps. I emphasize server components by default, native fetch caching, image/font optimization, and Core Web Vitals targets.

When to use it

• Starting a new Next.js 14+ project with App Router and strict TypeScript
• Migrating Pages Router apps to App Router and server components
• Implementing server actions for form handling and mutations
• Optimizing performance: images, fonts, bundles, streaming SSR
• Configuring SEO with the Metadata API and structured metadata
• Preparing production builds and deployment on Vercel or self-hosting

Best practices

• Use App Router exclusively; avoid the pages/ directory
• Default to Server Components; mark interactive parts with 'use client'
• Enable strict TypeScript and type all server action inputs/outputs
• Use native fetch with appropriate cache and revalidation options
• Optimize images with next/image and local or remote image config
• Implement loading/error boundaries and target Core Web Vitals > 90

Example use cases

• Designing route/layout hierarchy with nested layouts and loading UI
• Creating server actions for authenticated form submission and revalidation
• Configuring ISR or on-demand revalidation for frequently updated pages
• Reducing bundle size via component-level streaming and edge runtimes
• Preparing next.config.js and Docker/Vercel deployment scripts