Next.js Template

A modern, opinionated Next.js starter template with best practices baked in. Built with Bun, TypeScript, and Tailwind CSS.

Features

• Next.js 16 - Latest App Router with React 19
• Tailwind CSS 4 - Utility-first CSS framework
• shadcn/ui - Beautiful, accessible UI components (Radix UI)
• Dark Mode - Built-in theme switching with next-themes
• React Hook Form + Zod - Type-safe form validation
• TanStack Query - Powerful data fetching & caching
• React Compiler - Automatic optimization with babel-plugin-react-compiler
• TypeScript - Full type safety
• Bun - Fast JavaScript runtime & package manager
• ESLint - Code linting with Next.js config
• Prettier - Code formatting with Tailwind plugin
• Husky - Git hooks for pre-commit checks
• Commitlint - Conventional commit message enforcement

Project Structure

nextjs-template/
├── .husky/                  # Git hooks
│   ├── commit-msg           # Commitlint validation
│   └── pre-commit           # Lint & type check
├── public/                  # Static assets
├── src/
│   ├── app/                 # Next.js App Router
│   │   ├── globals.css      # Global styles & Tailwind theme
│   │   ├── layout.tsx       # Root layout with providers
│   │   └── page.tsx         # Home page
│   ├── components/
│   │   ├── ui/              # shadcn/ui components
│   │   │   ├── button.tsx
│   │   │   └── dropdown-menu.tsx
│   │   └── theme-toggle.tsx # Dark mode toggle
│   ├── hooks/
│   │   └── usehook.ts       # Custom React hooks
│   ├── lib/
│   │   └── utils.ts         # Utility functions (cn)
│   ├── providers/
│   │   ├── providers.tsx    # React Query provider
│   │   └── theme-provider.tsx
│   ├── schema/
│   │   └── schema.ts        # Zod validation schemas
│   └── types/
│       └── types.ts         # TypeScript type definitions
├── .prettierrc              # Prettier config
├── commitlint.config.cjs    # Commitlint rules
├── components.json          # shadcn/ui config
├── eslint.config.mjs        # ESLint config
├── next.config.ts           # Next.js config
├── postcss.config.mjs       # PostCSS config
└── tsconfig.json            # TypeScript config

Getting Started

Prerequisites

• Bun (v1.0+)

Installation

# Clone the repository
git clone <your-repo-url>
cd nextjs-template

# Install dependencies
bun install

# Start development server
bun dev

Open http://localhost:3000 to view the app.

Available Scripts

Command	Description
bun dev	Start development server
bun build	Build for production
bun start	Start production server
bun run lint	Run ESLint
bun run format	Format code with Prettier
bun run type:check	Run TypeScript type checking

Tech Stack

Category	Technology
Framework	Next.js 16 (App Router)
Language	TypeScript 5
Runtime	Bun
Styling	Tailwind CSS 4
UI Components	shadcn/ui (Radix UI)
Icons	Lucide React
Forms	React Hook Form + Zod
Data Fetching	TanStack Query
Theme	next-themes
Compiler	React Compiler
Linting	ESLint 9
Formatting	Prettier + Tailwind Plugin
Git Hooks	Husky + Commitlint

Commit Convention

This project uses Conventional Commits. Allowed types:

• feat - New feature
• fix - Bug fix
• refactor - Code refactoring
• docs - Documentation changes
• style - Code style changes
• test - Adding or updating tests
• chore - Maintenance tasks

Example:

git commit -m "feat: add user authentication"

License

MIT