Next.js Full Stack Skill

1---2name: nextjs-fullstack3description: Use this skill for any Next.js 14+ development task. Activates App Router patterns, server component defaults, Server Actions, strict TypeScript, and production conventions.4---5 6# Next.js Full Stack Skill7 8Use this skill whenever you are writing or modifying a Next.js 14+ project using the App Router.9 10## App Router Mental Model11- App Router only — never suggest the pages/ directory for new code12- Server Components are the default; add 'use client' ONLY when a component needs event handlers, browser APIs, or React state13- Colocate loading.tsx, error.tsx, not-found.tsx next to the route they belong to14- Use route groups (folder) to organize files without affecting URL structure15- Prefer nested layouts over client-side layout shifts16- Dynamic routes use [param] and catch-alls use [...param] or [[...param]]17 18## File Structure19```20app/21  (marketing)/          # Route group, not in URL22    page.tsx            # /23    pricing/page.tsx    # /pricing24  (app)/                # Authenticated app25    layout.tsx          # Shared dashboard shell26    dashboard/page.tsx  # /dashboard27  api/                  # Route handlers (only when Server Actions cannot work)28    webhook/route.ts29components/             # Reusable UI30  ui/                   # shadcn primitives31  [feature]/            # Feature components32lib/                    # Pure logic, DB clients, server-only utilities33  db.ts34  auth.ts35  utils.ts36```37 38## Data Fetching39- Fetch in Server Components whenever possible — never via useEffect on first paint40- Use async components with typed fetch calls41- Use Server Actions ('use server') for mutations, not API routes42- Tag fetches with { next: { tags: ['tag'] } } and revalidateTag for targeted invalidation43- Use revalidatePath only when tag-based invalidation is not precise enough44- For streaming, wrap slow children in Suspense with a meaningful fallback45 46## TypeScript47- strict: true, noUncheckedIndexedAccess: true, noImplicitAny: true48- Never use any — use unknown and narrow with type guards49- Prefer type over interface except when you need declaration merging50- Name component props as ComponentNameProps51- Type Server Action signatures explicitly; do not rely on inference for public API52 53## Performance54- next/image with explicit width/height for LCP images55- next/font for custom fonts (never <link rel="stylesheet" href="google fonts">)56- dynamic() with ssr:false only for truly client-only libraries57- generateStaticParams for known dynamic routes at build time58- Prefer streaming + Suspense over route-level loading spinners59 60## Styling61- Tailwind CSS as the primary styling solution62- shadcn/ui for UI primitives (Button, Dialog, Form, Input, etc.)63- Compose classNames with the cn() helper from lib/utils64- Avoid inline style except for truly dynamic values (e.g. background-image with runtime URL)65 66## Forms and Validation67- Zod schemas for every form input, reused on client and server68- Server Actions validate with schema.parse() at the top of the action69- Surface field errors via useActionState or server-returned error objects70- Never trust client-side validation alone71 72## Database73- Drizzle or Prisma — pick one per project and stick with it74- Initialize the client in lib/db.ts and import from there only on the server75- Never import the DB client from a client component file76- Migrations are committed; applied migrations are never edited77 78## Conventions79- One Server Action per mutation, colocated with the component that calls it80- No business logic in page.tsx — lift into lib/ or a feature folder81- Error boundaries at meaningful unit boundaries (route, feature), not the whole app82- Environment variables validated at boot with Zod (server.ts pattern)