Next JS Starter Template with NextJS 11, Tailwind CSS 2, React, TypeScript, ESLint, Prettier, Husky, Lint-Staged, SEO, VSCode

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 or you can find the code on GitHub:

GitHub logo ixartz / Next-js-Boilerplate

🚀 Boilerplate and Starter for Next.js 11+, Tailwind CSS 2.0 and TypeScript ⚡️ Made with developer experience first: Next.js + TypeScript + ESLint + Prettier + Husky + Lint-Staged + VSCode + Netlify + PostCSS + Tailwind CSS

Boilerplate and Starter for Next JS 11+, Tailwind CSS 2.0 and TypeScript Twitter

Next js starter banner

🚀 Boilerplate and Starter for Next.js, Tailwind CSS and TypeScript ⚡️ Made with developer experience first: Next.js, TypeScript, ESLint, Prettier, Husky, Lint-Staged, VSCode, Netlify, PostCSS, Tailwind CSS.

Clone this project and use it to create your own Next.js project. You can check a Next js templates demo.

Features

Developer experience first:

  • 🔥 Next.js for Static Site Generator
  • 🎨 Integrate with Tailwind CSS
  • 💅 PostCSS for processing Tailwind CSS
  • 🎉 Type checking TypeScript
  • ✏️ Linter with ESLint
  • 🛠 Code Formatter with Prettier
  • 🦊 Husky for Git Hooks
  • 🚫 Lint-staged for running linters on Git staged files
  • 🗂 VSCode configuration: Debug, Settings, Tasks and extension for PostCSS, ESLint, Prettier, TypeScript
  • 🤖 SEO metadata, JSON-LD and Open Graph tags with Next SEO
  • ⚙️ Bundler Analyzer
  • 🖱️ One click deployment with Vercel or Netlify
  • 🌈 Include a FREE minimalist theme
  • 💯…


View on GitHub

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:

Premium Nextjs Landing Page Template Indigo Nextjs Template
Premium Nextjs Landing Page Template Indigo Nextjs Template
Purple Nextjs Template Blue Landing Page Nextjs Template
Purple Nextjs Template Blue Landing Page Nextjs Template

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

26

Categories:

React

Tags:

ReactWebdevShowdevNextjs