Yet another production-ready starter kit that combines Next.js 15+ with the new App Router, Tailwind CSS, and TypeScript.
The boilerplate includes authentication systems, database integration, testing frameworks, deployment configurations, and monitoring tools in a single package.
You can use it to build SaaS applications, e-commerce platforms, content management systems, and other complex web applications.
Features
🔒 Complete authentication system powered by Clerk with passwordless login, multi-factor authentication, and social provider support.
👤 Advanced user management features including profile updates, password changes, account deletion, and user impersonation.
📦 DrizzleORM integration supporting PostgreSQL, SQLite, and MySQL databases with type-safe queries.
💽 Local development database using PGlite for offline development without external dependencies.
☁️ Production database integration with Prisma Postgres for scalable cloud deployments.
🌐 Multi-language support through next-intl with automated translation workflows via Crowdin.
♻️ Environment variable management with T3 Env for type-safe configuration.
⌨️ Form handling through React Hook Form with Zod validation for robust user input processing.
📏 Code quality enforcement with ESLint, Prettier, and Lefthook for consistent development standards.
🦺 Comprehensive testing setup including Vitest unit tests and Playwright end-to-end testing.
🎉 Storybook integration for component development and design system documentation.
🚨 Error monitoring with Sentry integration and local development debugging tools.
📝 Structured logging system with LogTape and Better Stack integration for production monitoring.
🔐 Security features powered by Arcjet, including bot protection, rate limiting, and attack prevention.
📊 Analytics integration with PostHog for user behavior tracking and performance insights.
🗺️ SEO optimization with automatic sitemap generation, robots.txt, and Open Graph metadata.
Use Cases
- Enterprise SaaS applications requiring complete user authentication, subscription management, and multi-tenant architecture with production-grade monitoring and security features.
- E-commerce platforms needing secure payment processing, inventory management, user accounts, and international localization support across multiple markets.
- Content management systems with role-based access control, multi-language content creation, SEO optimization, and collaborative editing workflows.
- Developer tools and API platforms requiring comprehensive documentation, user onboarding, usage analytics, and automated testing pipelines.
- Corporate websites with complex forms, lead generation systems, customer portals, and integration with existing business systems and CRM platforms.
How to Use It
1. Clone the boilerplate repository from GitHub.
git clone --depth=1 https://github.com/ixartz/Next-js-Boilerplate.git my-project-name2. Navigate into the newly created project directory and install the required dependencies using npm.
cd my-project-name
npm install3. Start the local development server with the following command. The project is pre-configured with PGlite for local database operations, so no additional database setup is needed to run it locally.
npm run devOpen http://localhost:3000 in a web browser to view the application. The server supports live reloading, which automatically reflects code changes.
4. The project uses Clerk for user authentication. To enable it, create an account on Clerk.com and set up a new application. In the Clerk Dashboard, find your API keys and create a .env.local file in the project’s root directory. Add your keys to this file.
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
CLERK_SECRET_KEY=your_clerk_secret_key5. For production, you can connect to a remote PostgreSQL database. The project uses DrizzleORM, a type-safe ORM. After creating a PostgreSQL database and obtaining its connection string, add it to your .env.local file as DATABASE_URL.
# FIXME: Configure environment variables for your project
# If you need to build a SaaS application with Stripe subscription payment with checkout page, customer portal, webhook, etc.
# You can check out the Next.js Boilerplate SaaS: https://nextjs-boilerplate.com/pro-saas-starter-kit
# Clerk authentication
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_cmVsYXhlZC10dXJrZXktNjcuY2xlcmsuYWNjb3VudHMuZGV2JA
# PostHog
NEXT_PUBLIC_POSTHOG_KEY=
NEXT_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
# Database
# Local database with PGLite, already included in the project, no Docker needed
# Need a database for production? Check out https://www.prisma.io/?via=nextjsboilerplate
# Tested and compatible with Next.js Boilerplate
DATABASE_URL=postgresql://postgres:[email protected]:5432/postgres
# Next.js
NEXT_TELEMETRY_DISABLED=1
######## [BEGIN] SENSITIVE DATA ######## For security reason, don't update the following variables (secret key) directly in this file.
######## Please create a new file named `.env.local`, all environment files ending with `.local` won't be tracked by Git.
######## After creating the file, you can add the following variables.
# Arcjet security
# Get your key from https://launch.arcjet.com/Q6eLbRE
# ARCJET_KEY=
# Clerk authentication
CLERK_SECRET_KEY=your_clerk_secret_key
######## [END] SENSITIVE DATA
6. To modify the database schema, edit the file at ./src/models/Schema.ts. After saving your changes, generate a migration file by running this command:
npm run db:generateThe migration applies automatically the next time the application interacts with the database.
7. Configure internationalization by creating a Crowdin account for translation management. Create a new project in Crowdin, obtain your project ID, and generate a Personal Access Token from your account settings. Add these credentials to your GitHub Actions environment variables to enable automatic translation synchronization.
CROWDIN_PROJECT_ID=your_project_id
CROWDIN_PERSONAL_TOKEN=your_personal_access_token8. Customize the application by searching for FIXME: throughout the codebase. This reveals all areas requiring project-specific customization. Replace favicon files in the public directory, update the configuration in src/utils/AppConfig.ts, and modify the default theme in src/templates/BaseTemplate.tsx according to your branding requirements.
9. To deploy your application, first build the production version:
npm run build10. Test this build locally by starting the server:
npm run startRelated Resources
- Next.js Official Documentation – Complete guide to Next.js features, API routes, deployment options, and performance optimization techniques for modern React applications.
- Tailwind CSS Documentation – Comprehensive reference for utility-first styling, responsive design patterns, and advanced configuration options for rapid UI development.
- DrizzleORM Documentation – Type-safe ORM documentation covering database operations, migrations, schema definitions, and integration patterns for PostgreSQL, MySQL, and SQLite.
- Clerk Authentication Guide – Complete authentication platform documentation including user management, social logins, multi-factor authentication, and advanced security configurations.
FAQs
Q: Can I use this boilerplate with databases other than PostgreSQL?
A: Yes, DrizzleORM supports PostgreSQL, MySQL, and SQLite databases. You can switch database providers by updating the connection configuration and installing the appropriate database driver. The schema definitions and migrations remain compatible across all supported database types.
Q: How do I add new languages to the internationalization system?
A: Add new locale configurations to your Crowdin project and update the locale settings in next.config.ts. The automated workflow synchronizes new translations when you push changes to the main branch. You can also manually add translation files in the locales directory for immediate testing.
Q: Is this boilerplate suitable for large-scale applications?
A: Yes, the boilerplate includes enterprise-grade features like error monitoring, logging systems, security middleware, automated testing, and deployment configurations. The modular architecture supports scaling from prototype to production with thousands of users.
Q: Can I remove features I don’t need from the boilerplate?
A: Absolutely, the boilerplate provides maximum flexibility for customization. You can remove authentication, database integration, monitoring tools, or any other features by uninstalling dependencies and removing related configuration files. The modular structure prevents breaking changes when removing components.
