Next.js 16 Boilerplate

A production-ready starter template with everything you need to build and deploy high-performance Next.js applications.

🖥️ Demo

✨ Features

This boilerplate is designed to give you a production-ready foundation with everything configured for optimal development experience and performance:

• 🚀 Performance Optimized - 100% Lighthouse score out of the box
• 🔍 SEO Ready - Comprehensive meta tags and structured data
• 🎨 Modern UI - Clean design with light/dark mode support
• 🛠️ Developer Experience - Comprehensive tooling preconfigured
• 📱 Responsive - Mobile-first approach for all screen sizes
• ♿ Accessible - WCAG compliance with a11y best practices
• 🔒 Type Safe - Full TypeScript support throughout the codebase

📚 Tech Stack

• Next.js 16 - React framework for production with Turbopack
• React 19 - Latest React with improved performance
• Prisma - Next-generation ORM for database management
• Clerk - Complete user management and authentication
• Framer Motion - Production-ready animation library
• TypeScript - Type safety and improved developer experience
• Tailwind CSS - Utility-first CSS framework
• ESLint - Code quality and consistency
• Prettier - Code formatting
• Husky - Git hooks for pre-commit validation
• next-themes - Theme management (light/dark mode)
• TanStack Query - Powerful data fetching and state management

🚀 Getting Started

Create a new project using this boilerplate

git clone https://github.com/AnwarHossainSR/nextjs-16-template.git

Development

# Install dependencies
npm install
# or
yarn install

# Start development server
npm run dev
# or
yarn dev

Your application will be available at http://localhost:3000.

📋 Scripts

Command	Description
npm run dev	Start development server
npm run build	Build production application
npm run start	Start production server
npm run lint	Run ESLint to check code quality
npm run format	Format code with Prettier
npm run prisma:generate	Generate Prisma client
npm run prisma:push	Push schema changes to database
npm run seed	Seed database with initial data

🧰 Project Structure

src/
├── app/              # App router pages and API routes
├── components/       # Reusable UI components
├── config/           # Application configuration
├── context/          # React context providers
├── env/              # Environment variable configuration
├── hooks/            # Custom React hooks
├── layouts/          # Layout components
├── lib/              # Utility functions and libraries
├── providers/        # Context providers
├── services/         # API services and business logic
├── styles/           # Global styles
└── types/            # TypeScript type definitions

prisma/
├── schema.prisma     # Database schema
└── seed.ts           # Database seeding script

💅 Styling

This boilerplate uses Tailwind CSS v4 with canonical syntax for styling with a custom theme configuration that supports light and dark modes. The project uses CSS variables for theming, making it easy to customize colors and styles.

Canonical Tailwind Syntax

This project uses the new canonical Tailwind CSS syntax:

// Old syntax
className = 'bg-[var(--primary)] text-[var(--foreground)]';

// New canonical syntax
className = 'bg-(--primary) text-(--foreground)';

The project includes Google Fonts (Inter and Poppins) preloaded at build time for improved performance and consistent typography.

🧩 Development Features

Absolute Imports

Absolute imports are configured with the @/ prefix starting from the src folder:

// Instead of this
import { Button } from '../../../components/ui/Button';

// You can write this
import { Button } from '@/components/ui/Button';

Authentication

User authentication is handled by Clerk, providing:

• Email/password authentication
• Social login (Google, GitHub, etc.)
• User management dashboard
• Session management
• Protected routes

Database

The project uses Prisma as the ORM with MongoDB:

# Generate Prisma client
npm run prisma:generate

# Push schema changes
npm run prisma:push

# Seed database
npm run seed

Code Quality

ESLint is configured with:

• eslint-config-next - Next.js recommended rules
• React Compiler rules for optimal performance
• Custom rules for code quality and consistency

Git Hooks

On every commit, the following checks run automatically:

1. TypeScript type checking - Ensures type safety
2. ESLint with auto-fix - Fixes code quality issues
3. Prettier formatting - Ensures consistent code style
4. Commitlint - Validates commit message format

On every push:

1. Production build - Ensures the app builds successfully
2. Prisma client generation - Validates database schema

# Commit message format
type(scope): subject

# Examples
feat: add user authentication
fix: resolve build error
chore: update dependencies

🔍 SEO & Performance

• Comprehensive meta tags in the layout file
• OpenGraph and Twitter card metadata
• /public/robots.txt configured to allow indexing
• Sitemap generation support
• Next.js 16 with Turbopack for faster builds
• React 19 for improved performance
• Optimized images with next/image
• Server-side rendering and static generation

🔐 Environment Variables

Create a .env file in the root directory:

# Database
MONGODB_URI=your_mongodb_connection_string

# Clerk Authentication
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
CLERK_SECRET_KEY=your_clerk_secret_key
CLERK_WEBHOOK_SECRET=your_clerk_webhook_secret

# Clerk URLs
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/dashboard
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/dashboard

# NextAuth
NEXTAUTH_SECRET=your_nextauth_secret

# Environment
NODE_ENV=development

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

---

Made with ❤️ by Anwar Hossain