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:

1. fuse-ai-pilot:explore-codebase – Analyze project structure and existing patterns
2. fuse-ai-pilot:research-expert – Verify latest docs for all stack technologies
3. 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

Stack Decisions

Why These Technologies

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

Prisma 7

Better Auth

Best Practices

1. Server Components default – Add 'use client' only when needed
2. Colocate code – Keep related code in feature modules
3. Type everything – Full TypeScript, no any
4. Fetch where used – No prop drilling for data
5. Validate at boundary – Zod schemas for all inputs
6. Cache explicitly – Use use cache directive

Getting Started

1. Review nextjs-16 for App Router fundamentals
2. Set up prisma-7 for database
3. Add better-auth for authentication
4. Install nextjs-shadcn components
5. Configure nextjs-i18n if multilingual
6. Add nextjs-zustand for client state