Nextjs Stack

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