Next.js 16 Boilerplate

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

✨ Features

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

• 🚀 Next.js 16 & React 19 - Leveraging the latest features and performance improvements.
• 🎨 Tailwind CSS 4 - Modern utility-first CSS with high performance and canonical syntax.
• 🔒 Full Type Safety - TypeScript 5.8 throughout the entire codebase.
• 🛡️ Authentication - Pre-configured with Clerk for secure user management.
• 🗄️ Database Ready - Prisma ORM with MongoDB support.
• ⚡ Turbopack - Blazing fast development builds.
• 🔄 State Management - TanStack Query (React Query) for efficient data fetching.
• 🎭 Animations - Framer Motion 12 for smooth transitions.
• 🔍 SEO Optimized - Pre-configured meta tags and social sharing assets.
• 🛠️ Dev Tooling - ESLint 9, Prettier, Husky, and Commitlint pre-configured.

📚 Tech Stack

• Next.js 16.1.4 - React framework for production with Turbopack.
• React 19.2.3 - Latest React with improved performance and new features.
• Prisma 6.19.2 - Next-generation ORM for database management.
• Clerk - Complete user management and authentication.
• Framer Motion 12 - Production-ready animation library.
• TypeScript 5.8 - Type safety and improved developer experience.
• Tailwind CSS 4.1.4 - High-performance styling with canonical syntax.
• ESLint 9 - Code quality and consistency.
• Prettier - Code formatting.
• TanStack Query 5 - Powerful data fetching and state management.

🚀 Getting Started

1. Clone the project

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

2. Install dependencies

npm install

3. Environment Setup

Create a .env file in the root directory and add your credentials:

# 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

4. Start Development

npm run dev

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

📋 Scripts

🧰 Project Structure

src/
├── app/              # App router pages and API routes
├── components/       # Reusable UI components
├── lib/              # Utility functions and library wrappers
├── providers/        # React Context providers
├── styles/           # Global styles and Tailwind configuration
└── types/            # TypeScript definitions

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

💅 Styling with Tailwind CSS 4

This project utilizes the latest Tailwind CSS 4 features, including the new canonical syntax and CSS-first configuration:

// Canonical syntax for variables
className = 'bg-(--primary) text-(--foreground)';

📝 License

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

Made with ❤️ by Anwar Hossain