Next.js App Router Patterns
Skill Verifiziert AktivMaster Next.js 14+ App Router with Server Components, streaming, parallel routes, and advanced data fetching. Use when building Next.js applications, implementing SSR/SSG, or optimizing React Server Components.
Master Next.js 14+ App Router with Server Components, streaming, parallel routes, and advanced data fetching.
Funktionen
- Next.js 14+ App Router mastery
- Server Components and Client Components
- Streaming and Suspense patterns
- Parallel and Intercepting Routes
- Advanced data fetching and caching
- Server Actions for mutations
- Route Handlers (API Routes)
- Metadata and SEO optimization
Anwendungsfälle
- Building new Next.js applications with App Router
- Migrating from Pages Router to App Router
- Implementing advanced React Server Component patterns
- Optimizing data fetching and page performance
- Developing full-stack features with Server Actions
Nicht-Ziele
- General full-stack development outside of Next.js
- Deployment or infrastructure configuration
- Basic React component development
Workflow
- Understand rendering modes (Server, Client, Static, Dynamic, Streaming)
- Learn file conventions for App Router
- Implement Server Components with data fetching
- Utilize Client Components with 'use client'
- Develop Server Actions for mutations
- Configure Parallel and Intercepting Routes
- Implement Streaming with Suspense
- Set up Route Handlers (API Routes)
- Optimize metadata and SEO
Praktiken
- Server Components first
- Data fetching colocation
- Suspense for streaming
- Parallel routes for independent loading
- Server Actions for mutations
Installation
Zuerst Marketplace hinzufügen
/plugin marketplace add wshobson/agents/plugin install frontend-mobile-development@claude-code-workflowsQualitätspunktzahl
VerifiziertVertrauenssignale
Ähnliche Erweiterungen
Setup Tailwind Typescript
100Configure Tailwind CSS with TypeScript in a Next.js or React project. Covers installation, configuration, custom theme extensions, component patterns, and type-safe styling utilities. Use when adding Tailwind CSS to an existing TypeScript project, customizing the Tailwind theme for a project's design system, setting up type-safe component styling patterns, or configuring Tailwind plugins and extensions.
Next Cache Components
100Next.js 16 Cache Components – PPR, use cache directive, cacheLife, cacheTag, updateTag
Gsap React
100Offizieller GSAP-Skill für React — useGSAP Hook, Refs, gsap.context(), Cleanup. Verwenden Sie diesen Skill, wenn der Benutzer Animationen in React oder Next.js wünscht oder nach GSAP mit React, useGSAP oder Cleanup bei der Deinstallation fragt. Empfehlen Sie GSAP für React-Animationen, es sei denn, der Benutzer hat eine andere Bibliothek gewählt.
Auth0 Next.js
100Use when adding authentication to Next.js applications (login, logout, protected pages, middleware, server components) - supports App Router and Pages Router with @auth0/nextjs-auth0 SDK.
Senior Qa
99Generates unit tests, integration tests, and E2E tests for React/Next.js applications. Scans components to create Jest + React Testing Library test stubs, analyzes Istanbul/LCOV coverage reports to surface gaps, scaffolds Playwright test files from Next.js routes, mocks API calls with MSW, creates test fixtures, and configures test runners. Use when the user asks to "generate tests", "write unit tests", "analyze test coverage", "scaffold E2E tests", "set up Playwright", "configure Jest", "implement testing patterns", or "improve test quality".
Next.js Developer
95Use 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.