🚀 Next.js with App Router, Tailwind CSS, and TypeScript ⚡️ Prioritizing developer experience first: Next.js, TypeScript, ESLint, Prettier, Husky, Lint-Staged, Vitest, Testing Library, Cypress, Commitlint, VSCode, Tailwind CSS, Authentication with NextAuth, Storybook, Multi-language (i18n) and more.
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 19
- 🔒 Authentication with NextAuth
- 🌐 Multi-language (i18n) with next-intl
- ♻️ Type-safe environment variables with T3 Env
- ⌨️ Form handling with React Hook Form
- 🔴 Validation library with Zod
- 📏 Linter with ESLint
- 💖 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
- 💡 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
- Node.js 20+ and yarn
Run the following command on your local environment:
yarn installThen, you can run the project locally in development mode with live reload by executing:
npm run devOpen http://localhost:3000 with your favorite browser to see your project.
For translation, the project uses next-intl.
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.pngandpublic/favicon-32x32.png: your website faviconsrc/utils/AppConfig.ts: configuration filesrc/templates/BaseTemplate.tsx: default themenext.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 🚀.
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:
yarn commitOne 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.
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:
yarn testThe project uses Cypress for integration and end-to-end (E2E) testing. You can run the tests with the following commands:
yarn cy:openThis project includes a built-in bundle analyzer. It can be used to analyze the size of your JavaScript bundles. To begin, run the following command:
yarn build-statsBy running the command, it'll automatically open a new browser window with the results.
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.