Next.js Complete Stack

Master skill combining all framework documentation for modern Next.js development.

Agent Workflow (MANDATORY)

Before ANY implementation, use TeamCreate to spawn 3 agents:

• fuse-ai-pilot:explore-codebase - Analyze project structure and existing patterns

• fuse-ai-pilot:research-expert - Verify latest docs for all stack technologies

• mcp__context7__query-docs - Check integration compatibility

After implementation, run fuse-ai-pilot:sniper for validation.

Overview

When to Use

• Starting a new Next.js 16 project from scratch

• Need the complete recommended technology stack

• Building production applications with authentication

• Implementing forms, state management, and UI components

• Understanding how all parts fit together

Technology Stack

Layer Technology Skill Reference

Framework Next.js 16 (App Router) nextjs-16

Database ORM Prisma 7 prisma-7

Authentication Better Auth 1.2 better-auth

UI Components shadcn/ui 3.8.0 nextjs-shadcn

Forms TanStack Form nextjs-tanstack-form

State Zustand nextjs-zustand

Styling Tailwind CSS 4 tailwindcss

i18n next-intl 4.0 nextjs-i18n

Stack Decisions

Why These Technologies

Choice Reason

Better Auth over NextAuth.js TypeScript-first, plugin system, self-hosted

Prisma 7 over Drizzle Mature ecosystem, migrations, studio

TanStack Form over React Hook Form Modern API, server actions, type safety

Zustand over Redux/Context Minimal boilerplate, SSR-friendly

shadcn/ui over MUI/Chakra Copy/paste ownership, Radix primitives

Forbidden Patterns

• NextAuth.js - Use Better Auth instead

• Pages Router - Use App Router for new projects

• React Hook Form - Use TanStack Form

• Client Components by default - Server Components first

SOLID Architecture

Project Structure

src/ ├── app/ # Route handlers only │ ├── [locale]/ # i18n routing │ ├── api/ # API routes │ └── layout.tsx # Root layout ├── modules/ │ ├── cores/ # Shared infrastructure │ │ ├── i18n/ # Internationalization │ │ ├── shadcn/ # UI components │ │ ├── lib/ # Utilities (cn, etc.) │ │ └── db/ # Prisma client │ ├── auth/ # Authentication module │ └── [feature]/ # Feature modules └── proxy.ts # Route protection

Module Pattern

Each feature module contains:

• src/services/ - Business logic

• src/hooks/ - React hooks

• src/components/ - UI components

• src/interfaces/ - TypeScript types

Integration Points

Authentication + Database

Better Auth integrates with Prisma adapter for user storage. Schema in prisma/schema.prisma includes User, Session, Account, Verification tables.

Forms + UI + Validation

TanStack Form with Zod validation using shadcn/ui Field components. Server Actions for form submission.

State + Server Components

Zustand stores for client state only. Server Components fetch data directly. No global state for server data.

i18n + Routing

next-intl with [locale] segment. proxy.ts handles locale detection and redirects.

Quick Reference

Next.js 16

Feature Reference

App Router nextjs-16/app-router.md

Server Components nextjs-16/server-components.md

Caching nextjs-16/caching.md , cache-components.md

proxy.ts nextjs-16/proxy.md

Prisma 7

Feature Reference

Schema prisma-7/schema.md

Client prisma-7/client.md

Migrations prisma-7/migrations.md

TypedSQL prisma-7/typed-sql.md

Better Auth

Feature Reference

Setup better-auth/installation.md

OAuth better-auth/providers/

Plugins better-auth/plugins/

Prisma adapter better-auth/adapters/prisma.md

Best Practices

• Server Components default - Add 'use client' only when needed

• Colocate code - Keep related code in feature modules

• Type everything - Full TypeScript, no any

• Fetch where used - No prop drilling for data

• Validate at boundary - Zod schemas for all inputs

• Cache explicitly - Use use cache directive

Getting Started

• Review nextjs-16 for App Router fundamentals

• Set up prisma-7 for database

• Add better-auth for authentication

• Install nextjs-shadcn components

• Configure nextjs-i18n if multilingual

• Add nextjs-zustand for client state