tranhieutt/nextjs-app-router-patterns

name: nextjs-app-router-patterns type: reference description: "Provides Next.js App Router patterns for Server Components, Client Components, layouts, loading states, and server actions. Use when working with Next.js app directory files or when the user mentions App Router, Server Components, or server actions." paths: ["/*.tsx", "/.jsx", "**/next.config.", "/app//*.ts"] effort: 3 allowed-tools: Read, Glob, Grep, Write, Edit, Bash user-invocable: true when_to_use: "When building Next.js 14+ applications with App Router, Server Components, streaming, or advanced data fetching"

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.

When to Use

• Use when 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 Serve...