Next-js-Boilerplate

# Boilerplate and Starter for Next.js 16+, Tailwind CSS 4, and TypeScript.

Boilerplate and Starter for Next.js with App Router, Tailwind CSS, and TypeScript ⚡️ Prioritizing developer experience first: Next.js, TypeScript, ESLint, Prettier, Lefthook (replacing Husky), Lint-Staged, Vitest (replacing Jest), Testing Library, Playwright, Commitlint, VSCode, Tailwind CSS, Authentication with [Clerk](https://clerk.com?utm_source=github&utm_medium=sponsorship&utm_campaign=nextjs-boilerplate), Database with DrizzleORM (PostgreSQL, SQLite, and MySQL), Local database with PGlite and production with [Neon](https://get.neon.com/BMFYNtx), Error Monitoring with [Sentry](https://sentry.io/for/nextjs/?utm_source=github&utm_medium=paid-community&utm_campaign=general-fy25q1-nextjs&utm_content=github-banner-nextjsboilerplate-logo), Logging with LogTape (replacing Pino.js) and Log Management, Monitoring as Code, Storybook, Multi-language (i18n), AI-powered code reviews with CodeRabbit, Secure with [Arcjet](https://launch.arcjet.com/Q6eLbRE) (Bot detection, Rate limiting, Attack protection, etc.), and more. Clone this project and use it to create your own Next.js project. You can check out the live demo at [Next.js Boilerplate](https://demo.nextjs-boilerplate.com), which includes a working authentication system. ## Sponsors Add your logo here ### Demo **Live demo: [Next.js Boilerplate](https://demo.nextjs-boilerplate.com)** | Sign Up | Sign In | | --- | --- | | [](https://demo.nextjs-boilerplate.com/sign-up) | [](https://demo.nextjs-boilerplate.com/sign-in) | ### Features Developer experience first, extremely flexible code structure and only keep what you need: - ⚡ [Next.js](https://nextjs.org) with App Router support - Type checking [TypeScript](https://www.typescriptlang.org) - Integrate with [Tailwind CSS](https://tailwindcss.com) - AI coding agent instructions for Claude Code, Codex, Cursor, OpenCode, Copilot, and more - ✅ Strict Mode for TypeScript and React 19 - Authentication with [Clerk](https://clerk.com?utm_source=github&utm_medium=sponsorship&utm_campaign=nextjs-boilerplate): Sign up, Sign in, Sign out, Forgot password, Reset password, and more. - Passwordless Authentication with Magic Links, Multi-Factor Auth (MFA), Social Auth (Google, Facebook, Twitter, GitHub, Apple, and more), Passwordless login with Passkeys, User Impersonation - Type-safe ORM with DrizzleORM, compatible with PostgreSQL, SQLite, and MySQL - Offline and local development database with PGlite - ☁️ Remote and production database with [Neon](https://get.neon.com/BMFYNtx) - Multi-language (i18n) with next-intl and [Crowdin](https://l.crowdin.com/next-js) - ♻️ Type-safe environment variables with T3 Env - ⌨️ Form handling with React Hook Form - Validation library with Zod - Linter with Oxlint with Ultracite preset (replacing ESLint) - Code Formatter with Oxfmt (replacing Prettier) - Husky for Git Hooks (replaced by Lefthook) - Lint-staged for running linters on Git staged files - Lint git commit with Commitlint - Write standard compliant commit messages with Commitizen - Unused files and dependencies detection with Knip - I18n validation and missing translation detection with i18n-check - Unit Testing with Vitest and Browser mode (replacing React Testing Library) - Integration and E2E Testing with Playwright - Run tests on pull request with GitHub Actions - Storybook for UI development - AI-powered code reviews with [CodeRabbit](https://www.coderabbit.ai?utm_source=next_js_starter&utm_medium=github&utm_campaign=next_js_starter_oss_2025) - Error Monitoring with [Sentry](https://sentry.io/for/nextjs/?utm_source=github&utm_medium=paid-community&utm_campaign=general-fy25q1-nextjs&utm_content=github-banner-nextjsboilerplate-logo) - Local development error monitoring with Sentry Spotlight - ☂️ Code coverage with Codecov - Logging with LogTape and Log Management with [Better Stack](https://betterstack.com/?utm_source=github&utm_medium=sponsorship&utm_campaign=next-js-boilerplate) - ️ Monitoring as Code with [Checkly](https://www.checklyhq.com/?utm_source=github&utm_medium=sponsorship&utm_campaign=next-js-boilerplate) - Security and bot protection ([Arcjet](https://launch.arcjet.com/Q6eLbRE)) - Analytics with PostHog - Automatic changelog generation with Semantic Release - Visual regression testing - Absolute Imports using `@` prefix - VSCode configuration: Debug, Settings, Tasks and Extensions - SEO metadata, JSON-LD and Open Graph tags - ️ Sitemap.xml and robots.txt - Automatic dependency updates with Dependabot - ⌘ Database exploration with Drizzle Studio and CLI migration tool with Drizzle Kit - ⚙️ Bundler Analyzer - Include a FREE minimalist theme - Maximize lighthouse score Built-in features from Next.js: - ☕ Minify HTML & CSS - Live reload - ✅ Cache busting Optional features (easy to add): - Multi-tenancy, Role-based access control (RBAC) - OAuth for Single Sign-On (SSO), Enterprise SSO, SAML, OpenID Connect (OIDC), EASIE - Web 3 (Base, MetaMask, Coinbase Wallet, OKX Wallet) ### Philosophy - Nothing is hidden from you, allowing you to make any necessary adjustments to suit your requirements and preferences. - Dependencies are regularly updated on a monthly basis - Start for free without upfront costs - Easy to customize - Minimal code - Unstyled template - SEO-friendly - Production-ready ### Requirements - Node.js 24+ and npm ### Getting started Run the following command on your local environment: ```shell git clone --depth=1 https://github.com/ixartz/Next-js-Boilerplate.git my-project-name cd my-project-name npm install ``` For your information, all dependencies are updated every month. Then, you can run the project locally in development mode with live reload by executing: ```shell npm run dev ``` Open http://localhost:3000 with your favorite browser to see your project. For your information, the project is already pre-configured with a local database using PGlite. No extra setup is required to run the project locally. Need advanced features? Multi-tenancy & Teams, Roles & Permissions, Shadcn UI, End-to-End Typesafety with oRPC, Stripe Payment, Light / Dark mode. Try [Next.js Boilerplate Pro](https://nextjs-boilerplate.com/pro-saas-starter-kit). Or, need a Self-hosted auth stack (Better Auth)? Try [Next.js Boilerplate Plus](https://nextjs-boilerplate.com/nextjs-saas-starter-kit) ### Set up authentication To get started, create a Clerk account at [Clerk.com](https://clerk.com?utm_source=github&utm_medium=sponsorship&utm_campaign=nextjs-boilerplate) and create a new application in the Clerk Dashboard. Then copy the `NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY` and `CLERK_SECRET_KEY` values and add them to your `.env.local` file (not tracked by Git): ```shell NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_pub_key CLERK_SECRET_KEY=your_clerk_secret_key ``` You now have a fully functional authentication system with Next.js, including features such as sign up, sign in, sign out, forgot password, reset password, update profile, update password, update email, delete account, and more. ### Set up remote database The project uses DrizzleORM, a type-safe ORM that is compatible with PostgreSQL, SQLite, and MySQL databases. By default, the project is configured to seamlessly work with PostgreSQL, and you have the flexibility to choose any PostgreSQL database provider of your choice. When you launch the project locally for the first time, it automatically creates a PostgreSQL database on your local machine. This allows you to work with a PostgreSQL database without Docker or any additional setup. To set up a remote and production database, you need to create a PostgreSQL database and obtain the connection string. One recommended option is to use [Neon](https://get.neon.com/BMFYNtx), which provides a free PostgreSQL database. This database is compatible and has been tested with Next.js Boilerplate. After creating your Neon account, you can get the connection string and copy it to the `DATABASE_URL` variable in your `.env.production` file. > :warning: This project works