? 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 rea…


This content originally appeared on DEV Community and was authored by Remi W.

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.


This content originally appeared on DEV Community and was authored by Remi W.


Print Share Comment Cite Upload Translate Updates
APA

Remi W. | Sciencx (2021-09-03T17:35:48+00:00) ? React TypeScript Starter with Next JS, Tailwind CSS, Webpack 5, ESLint, Prettier [Open Source]. Retrieved from https://www.scien.cx/2021/09/03/%f0%9f%9a%80-react-typescript-starter-with-next-js-tailwind-css-webpack-5-eslint-prettier-open-source/

MLA
" » ? React TypeScript Starter with Next JS, Tailwind CSS, Webpack 5, ESLint, Prettier [Open Source]." Remi W. | Sciencx - Friday September 3, 2021, https://www.scien.cx/2021/09/03/%f0%9f%9a%80-react-typescript-starter-with-next-js-tailwind-css-webpack-5-eslint-prettier-open-source/
HARVARD
Remi W. | Sciencx Friday September 3, 2021 » ? React TypeScript Starter with Next JS, Tailwind CSS, Webpack 5, ESLint, Prettier [Open Source]., viewed ,<https://www.scien.cx/2021/09/03/%f0%9f%9a%80-react-typescript-starter-with-next-js-tailwind-css-webpack-5-eslint-prettier-open-source/>
VANCOUVER
Remi W. | Sciencx - » ? React TypeScript Starter with Next JS, Tailwind CSS, Webpack 5, ESLint, Prettier [Open Source]. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/09/03/%f0%9f%9a%80-react-typescript-starter-with-next-js-tailwind-css-webpack-5-eslint-prettier-open-source/
CHICAGO
" » ? React TypeScript Starter with Next JS, Tailwind CSS, Webpack 5, ESLint, Prettier [Open Source]." Remi W. | Sciencx - Accessed . https://www.scien.cx/2021/09/03/%f0%9f%9a%80-react-typescript-starter-with-next-js-tailwind-css-webpack-5-eslint-prettier-open-source/
IEEE
" » ? React TypeScript Starter with Next JS, Tailwind CSS, Webpack 5, ESLint, Prettier [Open Source]." Remi W. | Sciencx [Online]. Available: https://www.scien.cx/2021/09/03/%f0%9f%9a%80-react-typescript-starter-with-next-js-tailwind-css-webpack-5-eslint-prettier-open-source/. [Accessed: ]
rf:citation
» ? React TypeScript Starter with Next JS, Tailwind CSS, Webpack 5, ESLint, Prettier [Open Source] | Remi W. | Sciencx | https://www.scien.cx/2021/09/03/%f0%9f%9a%80-react-typescript-starter-with-next-js-tailwind-css-webpack-5-eslint-prettier-open-source/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.