Nextjs App Router

Next.js App Router (Next.js 16+)

Build modern React applications using Next.js 16+ with App Router architecture.

Overview

This skill provides patterns for Server Components (default) and Client Components ("use client"), Server Actions for mutations and form handling, Route Handlers for API endpoints, explicit caching with "use cache" directive, parallel and intercepting routes, and Next.js 16 async APIs and proxy.ts.

When to Use

Activate when user requests involve:

• "Create a Next.js 16 project", "Set up App Router"
• "Server Component", "Client Component", "use client"
• "Server Action", "form submission", "mutation"
• "Route Handler", "API endpoint", "route.ts"
• "use cache", "cacheLife", "cacheTag", "revalidation"
• "parallel routes", "@slot", "intercepting routes"
• "proxy.ts", "migrate from middleware.ts"
• "layout.tsx", "page.tsx", "loading.tsx", "error.tsx", "not-found.tsx"
• "generateMetadata", "next/image", "next/font"

Quick Reference