Boilerplate and Starter for Next.js 15+, Tailwind CSS 3.4, and TypeScript.

Demo

Live demo: Next.js Boilerplate

Features

Developer experience first, extremely flexible code structure and only keep what you need:

• ⚡ Next.js with App Router support
• 🔥 Type checking TypeScript
• 💎 Integrate with Tailwind CSS
• ✅ Strict Mode for TypeScript and React 18
• 🔒 Authentication with Clerk: 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
• ⌨️ Form handling with React Hook Form
• 🔴 Validation library with Zod
• 📏 Linter with ESLint (default Next.js, Next.js Core Web Vitals, Tailwind CSS and Antfu configuration)
• 💖 Code Formatter with Prettier
• 🦊 Husky for Git Hooks
• 🚫 Lint-staged for running linters on Git staged files
• 🚓 Lint git commit with Commitlint
• 📓 Write standard compliant commit messages with Commitizen
• 🎉 Storybook for UI development
• 💡 Absolute Imports using @ prefix
• 🗂 VSCode configuration: Debug, Settings, Tasks and Extensions
• 🤖 SEO metadata, JSON-LD and Open Graph tags
• 🗺️ Sitemap.xml and robots.txt
• ⚙️ Bundler Analyzer
• 🌈 Include a FREE minimalist theme
• 💯 Maximize lighthouse score

Built-in feature from Next.js:

• ☕ Minify HTML & CSS
• 💨 Live reload
• ✅ Cache busting

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 20+ and pnpm

Getting started

Run the following command on your local environment:

npm run dev

Open http://localhost:3000 with your favorite browser to see your project.

Set up authentication

To get started, you will need to create a Clerk account at Clerk.com and create a new application in the Clerk Dashboard. Once you have done that, copy the NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY and CLERK_SECRET_KEY values and add them to the .env.local file (not tracked by Git):

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_pub_key
CLERK_SECRET_KEY=your_clerk_secret_key

Now you 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.

Project structure

.
├── README.md                       # README file
├── .github                         # GitHub folder
├── .husky                          # Husky configuration
├── .storybook                      # Storybook folder
├── .vscode                         # VSCode configuration
├── public                          # Public assets folder
├── src
│   ├── app                         # Next JS App (App Router)
│   ├── core                        # Contains core logic and Clean Architecture layers.
│   │   ├── application             # Application-level logic and business rules.
│   │   │   ├── repositories        # Interfaces for repositories, defining how data should be handled (e.g., CRUD operations).
│   │   │   ├── services            # Business services that interact with repositories and execute application logic.
│   │   │   ├── use-cases           # Specific use cases for the application, implementing business logic using services and repositories.
│   │   ├── entities                # Domain entities and business logic.
│   │   │   ├── models              # Domain models representing the core data structures (e.g., User, Product).
│   │   │   ├── dto                 # Data Transfer Objects used to define the shape of data sent or received.
│   │   ├── infrastructure          # Handles communication with external systems (e.g., APIs).
│   │   │   ├── services            # Concrete service implementations.
│   │   │   ├── repositories        # API and database communication implementations
│   ├── components                  # React components ( maybe use atomic design )
│   ├── styles                      # Styles folder
│   ├── utils                       # Utilities folder
├── tailwind.config.js              # Tailwind CSS configuration
└── tsconfig.json                   # TypeScript configuration

Customization

• public/apple-touch-icon.png, public/favicon.ico, public/favicon-16x16.png and public/favicon-32x32.png: your website favicon
• next.config.ts: Next.js configuration
• .env: default environment variables

You have full access to the source code for further customization. The provided code is just an example to help you start your project. The sky's the limit 🚀.

Commit Message Format

The project follows the Conventional Commits specification, meaning all commit messages must be formatted accordingly. To help you write commit messages, the project uses Commitizen, an interactive CLI that guides you through the commit process. To use it, run the following command:

npm run commit

One of the benefits of using Conventional Commits is the ability to automatically generate a CHANGELOG file. It also allows us to automatically determine the next version number based on the types of commits that are included in a release.

Deploy to production

During the build process, database migrations are automatically executed, so there's no need to run them manually.

Then, you can generate a production build with:

$ npm run build

It generates an optimized production build of the boilerplate. To test the generated build, run:

$ npm run start

You also need to defined the environment variables CLERK_SECRET_KEY using your own key.

This command starts a local server using the production build. You can now open http://localhost:3000 in your preferred browser to see the result.

Useful commands

Bundle Analyzer

Next.js Boilerplate includes a built-in bundle analyzer. It can be used to analyze the size of your JavaScript bundles. To begin, run the following command:

npm run build-stats

VSCode information (optional)

If you are VSCode user, you can have a better integration with VSCode by installing the suggested extension in .vscode/extension.json. The starter code comes up with Settings for a seamless integration with VSCode. The Debug configuration is also provided for frontend and backend debugging experience.

With the plugins installed in your VSCode, ESLint and Prettier can automatically fix the code and display errors. The same applies to testing: you can install the VSCode Vitest extension to automatically run your tests, and it also shows the code coverage in context.

Pro tips: if you need a project wide-type checking with TypeScript, you can run a build with Cmd + Shift + B on Mac.

Contributions

Everyone is welcome to contribute to this project. Feel free to open an issue if you have any questions or find a bug. Totally open to suggestions and improvements.

License

Licensed under the MIT License, Copyright © 2024

Made with ♥ by LiamPham

Looking for a custom boilerplate to kick off your project? I'd be glad to discuss how I can help you build one.

References

Next-js-Boilerplate