Next.js FSD Template

A production-ready Next.js template with Feature-Sliced Design (FSD) architecture.

Features

• Next.js 16 with App Router and React 19
• Feature-Sliced Design architecture for scalable codebase
• TypeScript for type safety
• Tailwind CSS v4 for styling
• shadcn/ui for accessible UI components
• TanStack Query for server state management
• Zustand for client state management
• React Hook Form + Zod for form handling and validation
• Axios for HTTP requests
• Biome for linting and formatting
• Bun as package manager

Quick Start

# Install dependencies
bun install

# Start development server
bun run dev

# Build for production
bun run build

# Start production server
bun run start

Project Structure

src/
├── app/           # Next.js App Router (routing only)
├── app-pages/     # Page composition layer
├── widgets/       # Composite UI blocks
├── features/      # User interactions
├── entities/      # Business domain objects
├── shared/        # Reusable infrastructure
└── core/          # App initialization

FSD Layer Hierarchy

app → app-pages → widgets → features → entities → shared

Each layer can only import from layers below it. See SPECIFICATION.md for detailed rules.

Scripts

Command	Description
bun run dev	Start development server with Turbopack
bun run build	Build for production
bun run start	Start production server
bun run lint	Run Biome linter
bun run lint:fix	Fix linting issues
bun run format	Format code with Biome
bun run format:check	Check formatting
bun run check	Run all Biome checks
bun run check:fix	Fix all issues
bun run typecheck	Run TypeScript type checking
bun run clean	Clean node_modules and build artifacts

Adding shadcn/ui Components

npx shadcn@latest add button
npx shadcn@latest add dialog
npx shadcn@latest add dropdown-menu

Components are automatically added to src/shared/ui/.

Documentation

• SPECIFICATION.md - Detailed architecture documentation
• .cursorrules - AI agent coding guidelines

License

MIT