Boilerplate and Starter for Next.js 14+, Tailwind CSS 3.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, Husky, Lint-Staged, Vitest (replacing Jest), Testing Library, Cypress, Commitlint, VSCode, Tailwind CSS, Log Management, Storybook, Multi-language (i18n), and more. Ready for Next.js 15.

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
• 🌐 Multi-language (i18n) with next-intl and Crowdin
• ♻️ Type-safe environment variables with T3 Env
• ⌨️ 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
• 🦺 Unit Testing with Vitest and React Testing Library
• 🧪 Integration and E2E Testing with Cypress
• 👷 Run tests on pull request with GitHub Actions
• 🎉 Storybook for UI development
• 🎁 Automatic changelog generation with Semantic Release
• 🔍 Visual testing with Percy (Optional)
• 💡 Absolute Imports using @ prefix
• 🗂 VSCode configuration: Debug, Settings, Tasks and Extensions
• 🤖 SEO metadata, JSON-LD and Open Graph tags
• 🗺️ Sitemap.xml and robots.txt
• ⌘ Database exploration with Drizzle Studio and CLI migration tool with Drizzle Kit
• ⚙️ 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 npm

Translation (i18n) setup

For translation, the project uses next-intl. As a developer, you only need to take care of the English (or another default language) version.

After defining the environment variables in your GitHub Actions, your localization files will be synchronized with Crowdin every time you push a new commit to the main branch.

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)
│   ├── components                  # React components
│   ├── lib                         # 3rd party libraries configuration
│   ├── locales                     # Locales folder (i18n messages)
│   ├── models                      # Database models
│   ├── styles                      # Styles folder
│   ├── templates                   # Templates folder
│   ├── types                       # Type definitions
│   ├── utils                       # Utilities folder
│   └── validations                 # Validation schemas
├── cypress
│   ├── e2e                         # E2E tests
├── tailwind.config.js              # Tailwind CSS configuration
└── tsconfig.json                   # TypeScript configuration

Customization

You can easily configure Next js Boilerplate by searching the entire project for FIXME: to make quick customizations. Here are some of the most important files to customize:

• public/apple-touch-icon.png, public/favicon.ico, public/favicon-16x16.png and public/favicon-32x32.png: your website favicon
• src/utils/AppConfig.ts: configuration file
• src/templates/BaseTemplate.tsx: default theme
• next.config.mjs: 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 🚀.

This will create a migration file that reflects your schema changes. The migration is automatically applied during the next database interaction, so there is no need to run it manually or restart the Next.js server.

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.

Testing

All unit tests are located alongside the source code in the same directory, making them easier to find. The project uses Vitest and React Testing Library for unit testing. You can run the tests with the following command:

npm run test

Integration & E2E Testing

The project uses Cypress for integration and end-to-end (E2E) testing. You can run the tests with the following commands:

npm run cypress:open

In the local environment, visual testing is disabled, and the terminal will display the message [percy] Percy is not running, disabling snapshots.. By default, visual testing only runs in GitHub Actions.

Deploy to production

During the build process, database migrations are automatically executed, so there's no need to run them manually. However, you must define DATABASE_URL in your environment variables.

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

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.