nextjs-app-router_skill

Overview

This skill provides practical guidance for building and maintaining Next.js applications using the App Router (app/ directory). It enforces when to load App Router rules and explains file roles, component types, routing patterns, data fetching, and common best practices. Use it to ensure correct structure, data flow, and interactivity between server and client components.

How this skill works

The skill inspects files under any app/ directory and recognizes App Router patterns such as page.tsx, layout.tsx, loading.tsx, error.tsx, not-found.tsx, route.ts, template.tsx, default.tsx, and any .ts/.tsx that uses 'use client' or next/navigation. It highlights appropriate component types (Server vs Client), recommends colocated data fetching, identifies where server actions or route handlers belong, and surfaces routing patterns like dynamic, catch-all, parallel, and intercepting routes. It also suggests loading and error UI placements, cache strategies, and metadata usage.

When to use it

• When reading, reviewing, editing, or creating any file inside an app/ directory
• When asked to create or review page.tsx, layout.tsx, loading.tsx, error.tsx, not-found.tsx, or route.ts
• When implementing Server Components, Client Components, or adding 'use client'/'use server' directives
• When creating API route handlers, server actions, or colocated data fetching
• When implementing dynamic routes, parallel routes, intercepting routes, or route groups

Best practices

• Keep Client Components minimal and push 'use client' as far down the tree as possible
• Colocate data fetching inside Server Components close to where data is consumed
• Prefer Server Actions for mutations when suitable; use route handlers for API-like endpoints
• Always provide loading.tsx and error.tsx for user-friendly suspense and error boundaries
• Use fetch cache options and revalidation (no-store, force-cache, next.revalidate) to control runtime behavior
• Organize non-URL folders with route groups (parentheses) and use @-folders for parallel routes

Example use cases

• Create a new app/blog/[slug]/page.tsx that fetches post data server-side and includes generateStaticParams
• Add a dashboard/layout.tsx and dashboard/loading.tsx to show a consistent nav and suspense UI
• Convert an interactive counter into a small Client Component with 'use client' and keep data fetching on the parent Server Component
• Implement app/api/items/route.ts with GET and POST handlers using NextResponse.json
• Add a server action in app/actions.ts to handle form submissions and call revalidatePath for cache updates