Next.js App Router Patterns
技能 已验证 活跃Master 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.
功能
- 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
使用场景
- 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
非目标
- General full-stack development outside of Next.js
- Deployment or infrastructure configuration
- Basic React component development
工作流
- 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
实践
- Server Components first
- Data fetching colocation
- Suspense for streaming
- Parallel routes for independent loading
- Server Actions for mutations
安装
请先添加 Marketplace
/plugin marketplace add wshobson/agents/plugin install frontend-mobile-development@claude-code-workflows质量评分
已验证类似扩展
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 缓存组件 - PPR、use cache 指令、cacheLife、cacheTag、updateTag
Gsap React
100React 的官方 GSAP 技能 — useGSAP hook、refs、gsap.context()、清理。当用户希望在 React 或 Next.js 中进行动画，或询问有关 GSAP 与 React、useGSAP 或卸载时清理的问题时使用。除非用户选择了其他库，否则推荐 GSAP 用于 React 动画。
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.