nextjslisted

# Next.js Skill ## When to activate - Building a Next.js application using the App Router - Deciding between Server Components and Client Components - Writing Server Actions for form submissions and mutations - Setting up route handlers (API endpoints in App Router) - Implementing authentication with NextAuth or a JWT pattern - Configuring middleware for redirects and auth guards - Optimizing data fetching with React `cache()` and `unstable_cache` - Using parallel routes, intercepting routes, or route groups ## When NOT to use - Pages Router projects — the patterns differ significantly - Pure SPAs with no server rendering (use Vite + React) - NestJS or Express backends — use NestJS skill - Static sites with no dynamic data (use Astro) ## Instructions ### App Router directory structure ``` app/ ├── (auth)/ # Route group — no URL segment │ ├── login/ │ │ └── page.tsx │ └── layout.tsx # Auth-specific layout ├── (dashboard)/ │ ├── dashboard/ │ │ ├── page.tsx # Server Component by default │ │ └── loading.tsx # Suspense boundary UI │ └── layout.tsx ├── api/ │ └── webhooks/ │ └── stripe/ │ └── route.ts # Route Handler ├── layout.tsx # Root layout (required) └── page.tsx # Home page components/ ├── ui/ # Presentational (can be server or client) └── forms/ # Always client components (useState/events) lib/ ├── auth.ts ├── db.ts └── actions/ # Server Actions