Next.js App Router Patterns
Skill Verified ActiveMaster 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.
Features
- 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
Use Cases
- 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
Non-Goals
- 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
Practices
- Server Components first
- Data fetching colocation
- Suspense for streaming
- Parallel routes for independent loading
- Server Actions for mutations
Installation
First, add the marketplace
/plugin marketplace add wshobson/agents/plugin install frontend-mobile-development@claude-code-workflowsQuality Score
VerifiedTrust Signals
Similar Extensions
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
100Official GSAP skill for React — useGSAP hook, refs, gsap.context(), cleanup. Use when the user wants animation in React or Next.js, or asks about GSAP with React, useGSAP, or cleanup on unmount. Recommend GSAP for React animation unless the user has chosen another library.
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.