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

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

• 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

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

# 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.

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 

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.

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.

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';

User authentication is handled by Clerk, providing:

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

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

ESLint is configured with:

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

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

• 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

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

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

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