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
  • πŸ’―β€¦



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:

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

26