nextjs-app-router-patterns

Frontend & Expérience UX

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.

Documentation

Next.js App Router Patterns

Comprehensive patterns for Next.js 14+ App Router architecture, Server Components, and modern full-stack React development.

Use this skill when

●Building new Next.js applications with App Router
●Migrating from Pages Router to App Router
●Implementing Server Components and streaming
●Setting up parallel and intercepting routes
●Optimizing data fetching and caching
●Building full-stack features with Server Actions

Do not use this skill when

●The task is unrelated to next.js app router patterns
●You need a different domain or tool outside this scope

Instructions

●Clarify goals, constraints, and required inputs.
●Apply relevant best practices and validate outcomes.
●Provide actionable steps and verification.
●If detailed examples are required, open resources/implementation-playbook.md.

Resources

●resources/implementation-playbook.md for detailed patterns and examples.

Compétences similaires

Explorez d'autres agents de la catégorie Frontend & Expérience UX

Voir tout le catalogue

ui-ux-pro-max

"UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples."

VOIR LA FICHE

launch-strategy

"When the user wants to plan a product launch, feature announcement, or release strategy. Also use when the user mentions 'launch,' 'Product Hunt,' 'feature release,' 'announcement,' 'go-to-market,' 'beta launch,' 'early access,' 'waitlist,' or 'product update.' This skill covers phased launches, channel strategy, and ongoing launch momentum."

VOIR LA FICHE

angular-best-practices

Angular performance optimization and best practices guide. Use when writing, reviewing, or refactoring Angular code for optimal performance, bundle size, and rendering efficiency.

VOIR LA FICHE
Utiliser l'Agent nextjs-app-router-patterns - Outil & Compétence IA | Skills Catalogue | Skills Catalogue