Next JS Starter Template with NextJS 11, Tailwind CSS 2, React, TypeScript, ESLint, Prettier, Husky, Lint-Staged, SEO, VSCode
Tags: react, webdev, showdev, nextjs
Published: 2021-06-30 17:06:31

---
title: Next JS Starter Template with NextJS 11, Tailwind CSS 2, React, TypeScript, ESLint, Prettier, Husky, Lint-Staged, SEO, VSCode
description: A Next JS Starter Template for building website and application in Next JS styled with Tailwind CSS. Everything you need to kick start your next project
published: true
tags: react, webdev, showdev, nextjs
cover_image: https://github.com/ixartz/Next-js-Boilerplate/raw/master/public/assets/images/nextjs-starter-banner.png?raw=true
---

A couple months ago, I've release my free and open source Next JS Starter Template and I use it for my own projects. Recently, the Next JS team has released a new version, Next JS 11. So, I was for me an opportunity for me to update my starter code to the latest version, not only Next JS but also all the dependencies.

During these last months, I almost use it everyday and I learn so much on what works and what didn't. So, I include all these learning into this new version of my starter template and share it to the community.

Here is all the things included out of box:

- 🔥 Next JS 11
- 🎨 Tailwind CSS with JIT
- ❤️ React 11
- 🎉 TypeScript
- 🌇 Strict Mode for React and TypeScript
- ✏️ ESLint with default Next configuration, Next Core Web Vitals and Airbnb configuration
- 🛠 Prettier
- 🦊 Husky and Lint-Staged
- ✨ PostCSS, compatible with styled-jsx
- 🤖 SEO with Next-seo
- 🗂 VSCode with Extension, Settings and Debugging for client and service side.
- 🌈  Default Theme
- ⚙️ Bundler Analyzer
- 🖱️ One click deployment to Vercel/Netlify (or, you can deploy manually to any hosting services)

You can preview [a Next JS starter template live demo](https://creativedesignsguru.com/demo/Nextjs-Boilerplate/) or you can find the code on GitHub:

{% github ixartz/Next-js-Boilerplate %}

## Other Next JS Templates and Themes

Built in modern ways with components and UI blocks. You can also check my portfolio at my [Premium Next JS Theme](https://creativedesignsguru.com/category/nextjs/):

| [Premium Nextjs Landing Page Template](https://creativedesignsguru.com/landing-green-modern-nextjs-theme/) | [Indigo Nextjs Template](https://creativedesignsguru.com/landing-indigo-modern-react-theme/) |
| --- | --- |
| [![Premium Nextjs Landing Page Template](https://creativedesignsguru.com/assets/images/themes/landing-green-modern-nextjs-theme-xs.png)](https://creativedesignsguru.com/landing-green-modern-nextjs-theme/) | [![Indigo Nextjs Template](https://creativedesignsguru.com/assets/images/themes/landing-indigo-modern-nextjs-theme-xs.png)](https://creativedesignsguru.com/landing-indigo-modern-react-theme/) |

| [Purple Nextjs Template](https://creativedesignsguru.com/landing-purple-modern-react-theme/) | [Blue Landing Page Nextjs Template](https://creativedesignsguru.com/landing-blue-modern-react-theme/) |
| --- | --- |
| [![Purple Nextjs Template](https://creativedesignsguru.com/assets/images/themes/landing-purple-modern-nextjs-theme-xs.png)](https://creativedesignsguru.com/landing-purple-modern-react-theme/) | [![Blue Landing Page Nextjs Template](https://creativedesignsguru.com/assets/images/themes/landing-blue-modern-nextjs-theme-xs.png)](https://creativedesignsguru.com/landing-blue-modern-react-theme/) |

You can easily customize the themes based on your needs by saving you development and design time.