Next.js Developer
Skill Verifiziert AktivUse 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.
Funktionen
- 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
Anwendungsfälle
- 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
Nicht-Ziele
- 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
Praktiken
- App Router Architecture
- Server Component Patterns
- Server Action Best Practices
- Data Fetching & Caching Strategies
- Deployment & Production Optimization
- SEO Best Practices
Voraussetzungen
- Node.js 18+
- Next.js 14+ project context
Installation
Zuerst Marketplace hinzufügen
/plugin marketplace add jeffallan/claude-skills/plugin install claude-skills@fullstack-dev-skillsQualitätspunktzahl
VerifiziertVertrauenssignale
Ähnliche Erweiterungen
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
99Erstellen Sie unverwechselbare Frontend-Oberflächen in Produktionsqualität mit hoher Designqualität. Verwenden Sie diese Fähigkeit, wenn der Benutzer auffordert, Webkomponenten, Seiten oder Anwendungen zu erstellen. Generiert kreativen, polierten Code, der generische KI-Ästhetik vermeidet.
Shadcn/ui Component Library
99shadcn/ui component library for React with Tailwind CSS - copy-paste accessible components with full code ownership
Performance
99Optimieren Sie die Web-Performance für schnellere Ladezeiten und eine bessere Benutzererfahrung. Verwenden Sie dies, wenn Sie gefragt werden: „Beschleunigen Sie meine Website“, „Performance optimieren“, „Ladezeit reduzieren“, „langsames Laden beheben“, „Seitengeschwindigkeit verbessern“ oder „Performance-Audit durchführen“.