Next.js is the most popular React.js framework today. It eliminates the drawbacks of React and adds essential features to make the app production-ready and SEO-friendly.

If you are looking for a quick and easy way to start your next Next.js project, you might want to check out some of the best boilerplates available in 2023. Boilerplates are pre-configured templates with the most common features and libraries you need for web development. They can save time and hassle by setting up everything, from styling to testing to deployment.

Let's briefly look at some of the best Next.js boilerplates to use.

Superplate

Superplate is a front-end boilerplate with superpowers. It is maintained by the same developers who used to maintain the next boilerplate. They realized the difficulty in maintaining many external dependencies and the infinite number of front-end technologies developers use. Superplate was built to work around these issues.

It's built on top of a plugin architecture and allows you to integrate your own tools and best practices with ease. It also includes more than 30 built-in plugins for your favorite tools. Superplate's default framework is Next.js, so you can start using it immediately instead of next-boilerplate.

There are a plethora of plugins available for you to choose from. Here is a graphic from their GitHub repository that shows all supported plugins:

-> GitHub

-> Official Website

React Next Boilerplate

The React Next Boilerplate is a simple boilerplate that reduces the configuration by pre-configuring the main dependencies and provides the best development practices.

The boilerplate is an open-source project with over 150 contributions, 76 forks, and 313 stars. Here are all the libraries it comes pre-configured with:

• redux-saga
• redux-sage-routines
• next-i18next
• i18next
• redux
• reselect

-> GitHub

-> Official website

create-T3-app

This is my personal favorite and go-to option while starting a Next.js app quickly. It uses a T3 stack and focuses on modularity and full-stack type safety. You also have the freedom to incorporate any other libraries or tools that you use in your projects.

It does its magic from the command line itself. You only need to execute one command from your terminal in your desired working directory. Then the CLI command prompts questions regarding the libraries and frameworks you need. At last, it installs everything that you selected in the current working directly and gives a modular, typesafe app.

The T3 stack comes with Next.js and TypeScript by default. Optionally, it asks you optionally pre-install the following libraries:

• tRPC
• Prisma
• Tailwind CSS
• NextAuth.js

T3 is a must boilerplate to check out if you are someone whlosesse TypeScript.

-> GitHub

-> Offical website

Nextarter Chakra

If you use Chakra UI for styling, this boilerplate is for you. The nextarter-chakra is an open-source boilerplate configuring Next.js application with TypeScript and Chakra UI.

It is a battery-packed template that supports tons of tooling, SEO, and responsiveness features. You can remove particular dependencies if you don't want to.

For example, it comes prebuilt with libraries for linting and formatting. For example, eslint, prettier, husky, lint-staged, commitlint, commitizen, and standard-version.

This boilerplate is also PWA-ready by default. However, the PWA configuration is disabled by default. You need to enable it from next.config.js.

Lastly, it is optimized for SEO with next-seo and next-sitemap. You'll need to reconfigure or tinker with it to get it right according to your needs, but it's there if you need it.

-> GitHub

-> Official Website

Precedent

Precedent is an opinionated collection of components, hooks, and utilities for your Next.js project. It uses NextAuth and Prisma out of the box. t provides tons of features and best practices you can follow.

• Frameworks: Next.js, Auth.js, Prisma
• UI Libraries: Tailwind CSS, Radix, Framer Motion Lucide, etc.
• Built-in hooks: useIntersectionObserver, useLocalStorage, useScroll, etc.
• Code Quality: TypeScript, ESLint, Prettier
• Components: modals, popovers, tooltips

-> GitHub

-> Official Website

next-js dashboard

This boilerplate comes with CoreUI, a famous open-source bootstrap admin template. It uses TypeScript by default, that makes your app typesafe. Also, it uses React Bootstrap to style layouts for your app.

-> GitHub

-> Official Website

Fast Answers and Questions (FAQ):

What is a boilerplate?

Boilerplate is the code that has to be included in many places with little or no alteration. Such boilerplate code is particularly salient when the programmer must include a lot of code for minimal functionality. (Wikipedia)

Are boilerplate and templates the same?

boilerplate and templates are not the same. A template provides the structure and layout for a document, while a boilerplate provides actual text and images. A Boilerplate is something you copy and paste and adapt freely.

A template is rather handled in an organized fashion, never adapted but parameterized. In short, templates provide a foundation on which you can build, while boilerplates are designed for specific purposes2.

Closing Notes

Some of the top Next.js boilerplates are Superplate, React Next Boilerplate, T3 stack, Nextarter Chakra, Precedent, and next-js dashboard.

If you want to create a quick mock-up or MVP, or you don't want to spend time setting up different libraries and tools every time you create a new app, boilerplates are a must. They help you quickly configure everything you need to focus more on building your project.