DEV Community

Cover image for πŸš€ React TypeScript Starter with Next JS, Tailwind CSS, Webpack 5, ESLint, Prettier [Open Source]
Remi W.
Remi W.

Posted on

πŸš€ React TypeScript Starter with Next JS, Tailwind CSS, Webpack 5, ESLint, Prettier [Open Source]

A React Starter Template to start any project in perfect condition with Next JS, Webpack 5, Tailwind CSS. It was built for developer experience in mind with type checking (TypeScript), linter (ESLint) and Code formatter (Prettier).

The project has reached 500+ ⭐ stars on GitHub.

You can test the React Starter Template live demo.

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 (w/ JIT mode)
  • πŸ’… PostCSS for processing Tailwind CSS and integrated to styled-jsx
  • πŸŽ‰ Type checking TypeScript
  • βœ… Strict Mode for TypeScript and React 17
  • ✏️ Linter with ESLint (default NextJS, NextJS Core Web Vitals and Airbnb configuration)
  • πŸ›  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…

Built with latest technology

Here is the stack:

  • React 17
  • Next JS 11
  • Tailwind CSS 2 with JIT
  • TypeScript 4.4
  • React 17
  • ESLint for TypeScript
    • with Next JS default configuration and Next JS Core Web Vitals
    • with Airbnb configuration
  • Prettier, integrated to ESLint
  • Husky
  • Lint-Staged
    • Running linter
    • Running type checking before committing
  • PostCSS for Tailwind CSS and integrated to styled-jsx, NextJS default CSS-in-JS library
  • VSCode configuration
    • Debugging configuration
    • VSCode Extension
    • VSCode Settings
  • Strict Mode for TypeScript and React
  • SEO with Next-seo
  • Bundler Analyzer
  • One click deploy
    • Vercel
    • Or, Netlify
    • Or, you can deploy manually to any hosting service

Nextless JS, React SaaS Boilerplate Template

Nextless JS uses the same tech stack to build a SaaS product. It helps you to save time and you can focus on your products.

You can find more information on the tech stack at Nextless.js SaaS Boilerplate

Next JS SaaS Boilerplate Starter

You get everything you need to build a SaaS with:

  • Landing Page
  • User Dashboard
  • Authentication
  • Highly scalable backend
  • Infra as code
  • Stripe Integration with Subscription payment

Following the best practice in web development, you can easily customize to meet your needs and requirements. You can now launch your SaaS product better and faster.

Discussion (0)