DEV Community

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

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

Remi W.
I provide a collection of the beautiful free and premium React themes. Built on top of Nextjs and Tailwind CSS.
・2 min read

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.

Discussion (0)