Next JS Starter Kit with TypeScript and Tailwind CSS

I’ve just updated my Next JS Starter Template to the latest version, Next JS 12. The perfect starter kit to start your Next JS in seconds with TypeScript and Tailwind CSS 2. It was built for developer experience in mind with linter ESLint and Code form…


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

I've just updated my Next JS Starter Template to the latest version, Next JS 12. The perfect starter kit to start your Next JS in seconds with TypeScript and Tailwind CSS 2. It was built for developer experience in mind with linter ESLint and Code formatter Prettier and VSCode.

You can test the Next JS Starter Kit live demo.

You can check out the repo at: Next JS Starter Template GitHub

GitHub logo ixartz / Next-js-Boilerplate

🚀 Boilerplate and Starter for Next.js 12+, 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 12+, 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 all the features included out of box:

  • 🔥 Next JS 12

  • 🎨 Integrate with Tailwind CSS 2 with JIT mode

  • 🎉 TypeScript

  • ⚛️ React

  • ✏️ ESLint for TypeScript

    • with Next JS default configuration and Next JS Core Web Vitals
    • with 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-friendly

  • ⚙️ Bundler Analyzer

  • 🖱️ One click deploy

  • Vercel

    • Or, Netlify
    • Or, you can deploy manually to any hosting service

GitHub logo ixartz / Next-js-Boilerplate

🚀 Boilerplate and Starter for Next.js 12+, 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 12+, 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…





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-11-05T15:54:53+00:00) Next JS Starter Kit with TypeScript and Tailwind CSS. Retrieved from https://www.scien.cx/2021/11/05/next-js-starter-kit-with-typescript-and-tailwind-css/

MLA
" » Next JS Starter Kit with TypeScript and Tailwind CSS." Remi W. | Sciencx - Friday November 5, 2021, https://www.scien.cx/2021/11/05/next-js-starter-kit-with-typescript-and-tailwind-css/
HARVARD
Remi W. | Sciencx Friday November 5, 2021 » Next JS Starter Kit with TypeScript and Tailwind CSS., viewed ,<https://www.scien.cx/2021/11/05/next-js-starter-kit-with-typescript-and-tailwind-css/>
VANCOUVER
Remi W. | Sciencx - » Next JS Starter Kit with TypeScript and Tailwind CSS. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/11/05/next-js-starter-kit-with-typescript-and-tailwind-css/
CHICAGO
" » Next JS Starter Kit with TypeScript and Tailwind CSS." Remi W. | Sciencx - Accessed . https://www.scien.cx/2021/11/05/next-js-starter-kit-with-typescript-and-tailwind-css/
IEEE
" » Next JS Starter Kit with TypeScript and Tailwind CSS." Remi W. | Sciencx [Online]. Available: https://www.scien.cx/2021/11/05/next-js-starter-kit-with-typescript-and-tailwind-css/. [Accessed: ]
rf:citation
» Next JS Starter Kit with TypeScript and Tailwind CSS | Remi W. | Sciencx | https://www.scien.cx/2021/11/05/next-js-starter-kit-with-typescript-and-tailwind-css/ |

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.