{"enrichment":{"faq":[{"a":"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.","q":"How do I build a Next.js 14 app router application?"},{"a":"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.","q":"What are the best practices for Next.js server components?"},{"a":"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.","q":"How do I set up server actions in Next.js?"},{"a":"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.","q":"How can I optimize Next.js performance with images and SEO?"},{"a":"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.","q":"What's the proper way to deploy a Next.js app to Vercel?"},{"a":"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\u2014it 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.","q":"How do I use loading.tsx and error.tsx boundary files?"}],"shadow_tags":["full-stack-framework","react-server-components","app-directory-routing","vercel-deployment","seo-optimization","streaming-rendering","form-mutations","cache-strategy","edge-computing"],"summary_rewrite":"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."},"files":[{"bytes":5511,"path":"skills/nextjs-developer/SKILL.md","sha256":"a8631cf7789732d8f9924ec763d5f9b99ddb35b793929a2d067a72088c96de70","url":"https://skillfed.io/files/Jeffallan/claude-skills/nextjs-developer/ed4dbfd6/SKILL.md"}],"id":"Jeffallan/claude-skills/nextjs-developer","links":{"html":"https://skillfed.io/Jeffallan/claude-skills/nextjs-developer","md":"https://skillfed.io/Jeffallan/claude-skills/nextjs-developer.md","repo":"https://github.com/Jeffallan/claude-skills"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":984,"language":"Python","last_updated":"2026-05-20","license":"MIT","name":"nextjs-developer","publisher":"Jeffallan","stars":10759},"relations":{"similar":[{"id":"curiositech/some_claude_skills/nextjs-app-router-expert"},{"id":"greedychipmunk/agent-skills/nextjs-developer"},{"id":"giuseppe-trisciuoglio/developer-kit/nextjs-app-router"},{"id":"prowler-cloud/prowler/nextjs-16"},{"id":"giuseppe-trisciuoglio/developer-kit/nextjs-code-review"},{"id":"manutej/luxor-claude-marketplace/nextjs-development"},{"id":"rohitg00/awesome-claude-code-toolkit/nextjs-mastery"},{"id":"Gentleman-Programming/Gentleman-Skills/nextjs-15"},{"id":"organvm/a-i--skills/nextjs-fullstack-patterns"},{"id":"pproenca/dot-skills/nextjs"}]},"slug":{"owner":"Jeffallan","repo":"claude-skills","skill":"nextjs-developer"},"version":"ed4dbfd6"}