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

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

🧰 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