Next.js Template

Production-ready Next.js 16 starter with Tailwind CSS v4, TypeScript, Vitest, and Playwright.

Stack

• Next.js 16 — App Router
• Tailwind CSS v4 — CSS-first config (@import 'tailwindcss')
• TypeScript 5 — strict mode
• lucide-react — icon library
• Vitest — unit testing
• Playwright — E2E testing
• Husky — Git hooks
• lint-staged — run Prettier only on staged files
• commitlint — enforce conventional commit format
• Prettier — code formatting

Getting started

# 1. Install dependencies
pnpm install

# 2. Initialize Husky hooks (run once after cloning)
pnpm prepare

# 3. Configure environment
cp .env.example .env.local
# Edit NEXT_PUBLIC_API_URL and other vars

# 4. Start dev server
pnpm dev

Open http://localhost:3000.

Project structure

src/
└── app/
    ├── layout.tsx    # Root layout
    ├── page.tsx      # Home page
    └── globals.css   # Tailwind import + global styles

Git hooks

Hook	What it does
pre-commit	Runs lint-staged (Prettier on staged files)
commit-msg	Validates commit message format (commitlint)

Commit message format

Follows Conventional Commits:

<type>(<scope>): <description>

Allowed types: feat, fix, docs, refactor, test, chore, perf, style, ci, build, revert

Tailwind v4

This template uses Tailwind CSS v4 which is configured via CSS, not tailwind.config.js.

To add custom tokens, use @theme in globals.css:

@import 'tailwindcss';

@theme {
  --color-brand: #0ea5e9;
  --font-sans: 'Plus Jakarta Sans', sans-serif;
}

Environment variables

Variable	Description	Default
NEXT_PUBLIC_API_URL	Backend API base URL	http://localhost:3001

Scripts

Command	Description
pnpm dev	Dev server (localhost:3000)
pnpm build	Production build
pnpm start	Run production build
pnpm lint	ESLint check
pnpm test	Run unit tests
pnpm test:e2e	Run Playwright E2E tests
pnpm test:coverage	Run tests with coverage
pnpm prepare	Install Husky hooks