Next.js Dashboard Template

A comprehensive Next.js dashboard template featuring modern UI components and development patterns. Built with Next.js 16, it provides a solid foundation for building admin interfaces, dashboards, and data-driven applications.

Overview

An enterprise-grade Next.js 16 dashboard template with micro-frontend architecture, strict type safety, and production-ready infrastructure. Accelerates B2B application development with modern patterns, comprehensive testing, and automated API code generation.

Tech Stack: Next.js 16 | React 19 | shadcn/ui | TypeScript 5.7 | Tailwind CSS 4 | Zustand | Vitest | Playwright

Features

Components

Key Features

Feature	Description
Micro-Frontend Architecture	Single-spa runtime with edition system for modular, scalable feature development
Codegen Type-Safe API Layer	Swagger → Zod code generation with auto-refresh HTTP client and Result pattern error handling
Customizable UI Components	shadcn/ui allows powerful customization of components with Tailwind
Strict Type Safety	Zero-tolerance any policy, indexed access safety, comprehensive ESLint rules
Testing Pyramid	Three-level testing: Vitest (components) → MSW (integration) → Playwright (E2E)
Mock Server Integration	Mockoon with auto-generation from Swagger, override system, hot-reload
Production Ready	Docker multi-stage builds, Sentry monitoring, standalone output, CI/CD ready
AI Dev First	Comprehensive AI-focused documentation and coding rulesets for important features (AGENTS.md)

Screenshots

Login Page	Dashboard / Storyboard

Getting Started

1. Install dependencies:

   pnpm install

2. Copy the example environment file:

   cp env.example.txt .env.local

3. Start the development server:

   pnpm run dev

Visit http://localhost:3000 to explore the template.

Environment Configuration

# .env.local
NEXT_PUBLIC_API_URL=http://localhost:3001

Development

Available Scripts

# Development
pnpm run dev              # Start development server

# Building
pnpm run build            # Production build

# Code Quality
pnpm run lint             # Run ESLint
pnpm run lint:fix         # Fix lint issues

# Testing
pnpm test:unit            # Vitest unit/integration tests
pnpm test:ui:headless     # Playwright UI tests
pnpm test:all             # Complete test suite

# API Code Generation
pnpm api:gen              # Generate Zod schemas from Swagger

See more useful stuff in package.json.

---

Feature Highlights

Feature	Details
Environment Validation	Compile-time + build-time + runtime validation via @t3-oss/env-nextjs with custom Zod schemas. See src/env.ts
Comprehensive Strict ESLint Rules	No any, no unsafe operations, custom rules. See eslint.config.ts
Figma Icon Integration	Import custom branded icons directly from Figma with type-safe components. Run pnpm icons:import-and-generate-types and see scripts/figma-icon-import/
Docker Support	Multi-stage effective builds with standalone output. See Dockerfile and docker-compose.yml
Sentry Monitoring	Source map upload, tunnel route, component annotations. Configure via next.config.ts
State Management Patterns	Global stores (domain), atomic stores (UI), Context (framework), URL state (nuqs), forms (RHF)
Pre-commit Hooks	Husky + lint-staged for automated code quality checks
Edition System	Switch between MFE bundles in dev mode via localStorage. See src/mfes/config.ts

Documentation

• AGENTS.md – Frontend development ruleset for AI agents
• API Guide – HTTP client, code generation, patterns
• Micro-Frontend Guide – MFE architecture, edition system
• Testing Guide – Testing pyramid, mocks, examples
• Mock Server README – Mockoon setup and override system
• API Codegen README – Swagger to Zod generation

License

MIT