Top 10 Next JS Boilerplate 2022

next js boilerplate

Looking for the best Next JS Boilerplate? Then bookmark this collection for the best Next JS boilerplate 2022.

What is Next JS?

Next.js is a framework created by Vercel. It is open-source and based on Node.js and Babel. Next.js integrates with React for developing single-page apps. This makes server-side rendering very easy. That’s why it is one of the favorite choices of ReactJS developers across the globe. They also recommend using NextJS Admin Templates while working on React Projects.

Apart from that, Next.js supports static export, and pre-rendering and has many more nice features like automatic building size optimization, faster developer compilation, and a preview mode.

We recommend using the best IDE in Programming to boost your workflow. IDEs can help you work effectively and also saves your time by providing you with the best development environment.


  • Server-side rendering (SSR)
  • Static export (SSG)
  • Pre-rendering
  • Automatic build size optimization
  • Faster development compilation

Before jumping on to the collection we recommend checking Next js Projects for inspiration. It will surely help you to improve your developing skills

What Is a Boilerplate?

Well, a boilerplate is a unit of writing that can be reused over and over without change. By extension, the idea is sometimes applied to reusable programming, as in “boilerplate code.”

In computer programming, boilerplate code, or simply, boilerplate are sections of code that are repeated in multiple places with little to no variation. When using languages that are considered verbose, the programmer must write a lot of boilerplate code to accomplish only minor functionality. To know more, go through the detailed article on Boilerplate in Programming

Following is the list of Next Boilerplates that you can use for your project.

Next JS Boilerplate:

These are some of the best next boilerplates that you can keep in check. In case you want to learn Next js in-depth then we recommend checking the Best Next JS tutorial for beginners.

Now, let’s start the collection.

CMS Cosmic

Well, the first next boilerplate on the list is CMS Cosmic. It is a statically generated blog example using Next.js and Cosmic.


RAN is a React. GraphQL. Next.js Toolkit. Besides, it is SEO-Ready and Production-Ready. Furthermore, it offers some amazing features such as SSR, Hot-Reload, CSS-in-JS, Caching, CLI commands, and more. In addition, it is Prettier and ESLint integrated.

  • Hot-Reload Ready for Dev
  • Next-Generation JavaScript (ES6)
  • Next Generation CSS (CSS-in-JS)
  • Create New Page in a Second (with CLI)
  • SEO-Ready
  • Performance-first
  • Production Deployment Ready, for Now, Digital Ocean, Heroku, and AWS


A unique Next.js + Electron boilerplate. You can also use it with material UI, Tailwind CSS, and Javascript. You’ll find the examples on GitHub Repository.


A well-structured production-ready frontend boilerplate with Typescript, Jest, testing-library, styled-component, Sass, CSS, .env, Fetch, Axios, Reverse Proxy, Bundle Analyzer, and 30+ plugins. For now, only creates projects for React and Next.js.

Materio – MUI Free React Next.js Admin Template (The Best React TypeScript Example GitHub)

Materio Free MUI React Next. js Admin Template – is the most developer-friendly & highly customizable React Material Dashboard Template based on MUI and Next.js. If you’re a developer looking for the Best React Admin Template that is enriched with features, and highly customizable look no further than the Materio. Besides, the highest industry standards are considered to bring you one of the best React Admin Templates.

Besides, this Admin dashboard template React is fast, easy to use, and highly scalable. Furthermore, it offers ultimate convenience and flexibility, you’ll be able to build whatever application you want with very little hassle. It is the best React Material dashboard on GitHub.

Materio also offers invaluable features that aim to help you create premium quality single-page apps exactly as you imagine them🤘🏻. Furthermore, this template comes with unique and useful tools such as fuzzy search, Dark, Semi-Dark & Bordered layout options, Advanced cards, and Charts. You can check the React Boilerplates as well.


  • Based on MUI And Next. js
  • Simple vertical menu
  • 1 Simple Dashboard
  • Simple from layouts
  • Basic Cards, Tables
  • 1 Chart Library and many more

For the premium features, check the pro version.

materio mui react nextjs admin template

Next Right Now

Flexible production-grade boilerplate with Next.js 11, Vercel, and TypeScript. Besides, it includes multiple opt-in presets using Storybook, Airtable, GraphQL, Analytics, CSS-in-JS, Monitoring, End-to-end testing, Internationalization, CI/CD, and SaaS B2B multi single-tenancy (monorepo) support.

Furthermore, this boilerplate is meant for developers with basic skills in React, who are looking for a way of building production-grade web applications.


  • Stages (development, staging, production)
  • TypeScript advanced support
  • Storybook static site, to host the documentation of your React components
  • Various rendering capabilities, that allow for hybrid configuration
  • Font support (SSR/CSR friendly, no FOUT effect) (thanks to WebFontLoader)


Simple and Accessible PWA boilerplate with Nextjs 12 and MUI.


Devii is a starter kit for building your personal developer website.  Besides, it contains some useful utilities and patterns that’ll help you hit the ground running. Devii was designed to place zero restrictions on what your site can be or become.

You can also use any React component or styling library, pull in data from third-party APIs, and even implement user accounts. Furthermore, it makes it easy to write custom pages/code in React + TypeScript. In addition, it also supports exporting to fully static assets (powered by Next.js)


  • Works as a Markdown-based static-site generator out of the box: just add new blog posts to /md/blog
  • Supports exporting to fully static assets (powered by Next.js)
  • Hot reload (powered by Next.js)
  • Also, Provides a Markdown.tsx component with support for GitHub-style syntax highlighting
  • Automatic RSS feed generation
  • SEO best practices (title tag, meta tags, canonical URLs)

Nextjs Starter

A starter project for next js with authentication. Next.js Starter boilerplate is a boilerplate application for building web apps using  React 17 + Typescript + Tailwind CSS 2 + React Query 3 + GitHub Auth + LinkedIn Auth + Password-less Auth + Fauna DB + ESLint + Prettier + Husky.

Nextjs Netlify Blog Template

Next.js blogging template for Netlify is a boilerplate for building blogs with only Netlify stacks. Besides, it is also built with CMS to allow editors to modify the content in the quickest way. Furthermore, it organizes content by tags and also displays author names who write a post.


  • Author: displays author names who write a post
  • Pagination: limits the number of posts per page
  • SEO optimized: built-in metadata like JSON-LD
  • Shortcode: extends content writing with React components like WordPress shortcodes

Next.js Starter boilerplate

Next.js Starter boilerplate is a boilerplate application for building web apps using Express, SASS/SCSS, Bootstrap, Reactstrap (Boostrap 4 for React), and the Ionicons icon set.

It also supports features Authentication both via OAuth and Email using Passport, secure session using cookies and CSRF tokens, route handling, etc. It is focused on providing all the basic yet required functionalities so we can add the business logic directly. The repository is now marked as an archive but it’s still a good starter boilerplate.

Some uSEFUL NextJS Examples:

Now, the following are some useful NextJS Examples GitHub and articles.


So, here is the list of the best Next JS Boilerplate 2022. These next boilerplates are very useful. Besides, they come with unique features.

Apart from Next Boilerplate, we have mentioned some Next JS Examples as well. These examples will surely inspire you. Besides, it is also advantageous to take the help of such resources when you are new to this.

In case you are working with VueJS projects, you can use the VueJS Boilerplates for your projects.

We hope you find this collection helpful. Also, do suggest to us any other next js boilerplate that we can include in the list.


Related Posts

Register to ThemeSelection 🚀

Sign in with

Already Have Account?

By Signin or Signup to using social accounts or login/register form, You are agreeing to our Terms & Conditions and Privacy Policy
Reset Your Password 🔐

Enter your username/email address, we will send you reset password link on it. 🔓

Privacy Preferences
When you visit our website, it may store information through your browser from specific services, usually in form of cookies. Here you can change your privacy preferences. Please note that blocking some types of cookies may impact your experience on our website and the services we offer.