nextjs-developer
nextjs-developer is a specialist skill for architecting and implementing Next.js 14+ applications using the App Router and React Server Components. It guides you through routing structure, data fetching with caching, server actions for mutations, and deployment to Vercel, with built-in checks for performance and SEO compliance.
nextjs-developer helps you build Next.js 14+ apps with App Router, server components, and full-stack deployment.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-05-20
nextjs-developer helps you build Next.js 14+ apps with App Router, server components, and full-stack deployment. nextjs-developer is a specialist skill for architecting and implementing Next.js 14+ applications using the App Router and React Server Components. It guides you through routing structure, data fetching with caching, server actions for mutations, and deployment to Vercel, with built-in checks for performance and SEO compliance.
Use it when
- nextjs-developer emphasizes that server components should be your default in Next.js 14+.
- nextjs-developer helps you implement server actions for handling form submissions and mutations.
Verify before relying
Read SKILL.md below before installing (6 files). Open directory: indexed for reading, not audited.
Install
Jeffallan/claude-skills/nextjs-developer · repository language: Python
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I build a Next.js 14 app router application?
nextjs-developer guides you through building Next.js 14+ applications using the App Router and React Server Components. Start by organizing your app directory with nested folders for routes, use layout.tsx for shared UI, and leverage server components by default. The skill covers file-based routing conventions, dynamic routes with [id] syntax, and route groups with (folder) notation for organizing without affecting URLs.
What are the best practices for Next.js server components?
nextjs-developer emphasizes that server components should be your default in Next.js 14+. Keep data fetching, database queries, and sensitive operations on the server. Use 'use client' sparingly for interactive features. Server components reduce JavaScript sent to browsers, improve security by keeping secrets server-side, and enable direct database access. Combine them with client components only where interactivity is needed.
How do I set up server actions in Next.js?
nextjs-developer helps you implement server actions for handling form submissions and mutations. Mark functions with 'use server' at the top of files or individual functions. Server actions run securely on the server, handle form data directly, and automatically revalidate caches. They integrate seamlessly with forms, eliminate the need for separate API routes for mutations, and provide type-safe communication between client and server.
How can I optimize Next.js performance with images and SEO?
nextjs-developer covers performance optimization through next/image for automatic image optimization, responsive sizing, and lazy loading. For SEO, use generateMetadata to create dynamic metadata and Open Graph tags. Implement streaming with Suspense boundaries for faster perceived performance, optimize fonts with next/font, and use ISR for static regeneration. These techniques improve Core Web Vitals and search rankings.
What's the proper way to deploy a Next.js app to Vercel?
nextjs-developer guides production deployment to Vercel, where Next.js is optimized natively. Connect your Git repository for automatic deployments on push, configure environment variables for secrets, and set up preview deployments for pull requests. Vercel handles Edge Functions, serverless functions, and global CDN distribution automatically. The skill ensures your production configuration follows best practices for performance and reliability.
How do I use loading.tsx and error.tsx boundary files?
nextjs-developer explains that loading.tsx and error.tsx are special files for handling UI states. Place loading.tsx in a route segment to show a fallback while data loads—it wraps your page in a Suspense boundary automatically. Use error.tsx to catch errors in that segment and display a recovery UI. These boundaries improve user experience by showing meaningful states during async operations and gracefully handling failures.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
Next.js Developer
Senior Next.js developer with expertise in Next.js 14+ App Router, server components, and full-stack deployment with focus on performance and SEO excellence.
Core Workflow
- Architecture planning — Define app structure, routes, layouts, rendering strategy
- **Implement
(truncated - see the full file via the links below)
File tree — 6 files
skills/nextjs-developer/SKILL.md
skills/nextjs-developer/references/app-router.md
skills/nextjs-developer/references/data-fetching.md
skills/nextjs-developer/references/deployment.md
skills/nextjs-developer/references/server-actions.md
skills/nextjs-developer/references/server-components.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Build and architect Next.js 14+ applications using App Router and server components”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
This skill covers Next.js App Router architecture, including file-based routing, dynamic segments, parallel routes, and intercepting routes. Learn React Server Components, Server Actions for mutations, data fetching strategies with caching and ISR, middleware configuration, and performance optimization techniques. Ideal for building new projects or migrating from Pages Router.
Master Next.js 15+ development with App Router architecture, Server Components, and advanced patterns like Partial Prerendering. This skill covers file-based routing, Server Actions, caching strategies, and React 19 features to optimize performance and developer experience. Learn streaming, error boundaries, and production-ready patterns for modern web applications.
This skill equips you with patterns and code examples for Next.js 16+ App Router development, covering Server and Client Components, Server Actions for form handling, Route Handlers for APIs, and the new async APIs. Use it when setting up projects with App Router, configuring caching with the "use cache" directive, building parallel or intercepting routes, or migrating from middleware.ts to proxy.ts.
This skill covers Next.js 16 App Router architecture, including file organization, Server Components as the default, Server Actions for mutations, and Route Handlers for API endpoints. Learn caching and revalidation patterns, proxy configuration, and Suspense-based streaming to build performant full-stack applications.
Master Next.js 16 App Router development with 45 rules spanning build optimization, caching strategy, server components, routing, and mutations. This skill guides you through critical patterns like explicit `'use cache'` directives, `revalidateTag` with cache profiles, and parallel data fetching, plus a category-major review algorithm for auditing single files or entire codebases. Uncover codebase-level issues—duplicated fetchers, dead routes, and `'use client'` propagation—that single-file rules miss.
Master full-stack Next.js 16+ development with App Router, Server Components, and TypeScript. This skill covers routing patterns, data fetching with the `use cache` directive, Server Actions, ISR/SSR/SSG strategies, Turbopack optimization, and MCP devtools integration for modern React 19+ architectures.