Next.js Developer
Skill Verified ActiveUse 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.
Features
- 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
Use Cases
- 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
Non-Goals
- 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
Workflow
- 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
Practices
- App Router Architecture
- Server Component Patterns
- Server Action Best Practices
- Data Fetching & Caching Strategies
- Deployment & Production Optimization
- SEO Best Practices
Prerequisites
- Node.js 18+
- Next.js 14+ project context
Installation
First, add the marketplace
/plugin marketplace add jeffallan/claude-skills/plugin install claude-skills@fullstack-dev-skillsQuality Score
VerifiedSimilar Extensions
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.
Frontend Design
99Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Shadcn/ui Component Library
99shadcn/ui component library for React with Tailwind CSS - copy-paste accessible components with full code ownership
Performance
99Optimize web performance for faster loading and better user experience. Use when asked to "speed up my site", "optimize performance", "reduce load time", "fix slow loading", "improve page speed", or "performance audit".