DEV Community

Cover image for ๐Ÿ”ฅ Next JS Tailwind Template Free using TypeScript, ESLint, Prettier and Husky
Remi W.
Remi W.

Posted on

15 5

๐Ÿ”ฅ Next JS Tailwind Template Free using TypeScript, ESLint, Prettier and Husky

Next JS Tailwind Starter code free and open source with developer experience first with React, TypeScript, Tailwind CSS, ESLint, Prettier, Husky.

The GitHub repo have already reached 500+ stars ๐ŸŒŸ.

Built for production with high-quality:

  • ๐Ÿ”ฅ Next JS 11
  • ๐ŸŽจ Integrate with Tailwind CSS 2 (w/ JIT mode)
  • ๐ŸŽ‰ TypeScript
  • โš›๏ธ React
  • โœ๏ธ 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-friendly
  • โš™๏ธ Bundler Analyzer
  • ๐Ÿ–ฑ๏ธ One click deployment with Vercel or Netlify (or manual deployment to any hosting services)
  • ๐ŸŒˆ One minimalist theme

You can find a NextJS Tailwind Template live demo

GitHub logo ixartz / Next-js-Boilerplate

๐Ÿš€๐ŸŽ‰๐Ÿ“š Boilerplate and Starter for Next.js 14+ with App Router and Page Router support, Tailwind CSS 3.4 and TypeScript โšก๏ธ Made with developer experience first: Next.js + TypeScript + ESLint + Prettier + Drizzle ORM + Husky + Lint-Staged + Vitest + Testing Library + Playwright + Storybook + Commitlint + VSCode + Netlify + PostCSS + Tailwind CSS โœจ

Boilerplate and Starter for Next.js 14+, Tailwind CSS 3.4, and TypeScript.

Next js starter banner

๐Ÿš€ Boilerplate and Starter for Next.js with App Router, Tailwind CSS, and TypeScript โšก๏ธ Prioritizing developer experience first: Next.js, TypeScript, ESLint, Prettier, Husky, Lint-Staged, Vitest (replacing Jest), Testing Library, Playwright, Commitlint, VSCode, Tailwind CSS, Authentication with Clerk, Database with DrizzleORM (PostgreSQL, SQLite, and MySQL), Error Monitoring with Sentry, Logging with Pino.js and Log Management, Monitoring as Code, Storybook, Multi-language (i18n), and more. Ready for Next.js 15.

Clone this project and use it to create your own Next.js project. You can check out the live demo at Next.js Boilerplate, which includes a working authentication system.

Sponsors

Demo

Live demo: Next.js Boilerplate














Sign Up Sign In
Next.js Boilerplate SaaS Sign Up Next.js Boilerplate SaaS Sign In

Features

Developer experience first, extremely flexible code structure and only keep what you need:





Build your SaaS faster

Building your SaaS product faster with Next JS SaaS Boilerplate. Save you 5 months of development and design time.

Next JS SaaS Boilerplate

Other Next JS Templates and Themes

Checkout our Next JS Theme gallery

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (4)

Collapse
 
goldfinger profile image
Caleb โ€ข

Nice, you can also just use the library Create-Next-Stack. I use it quite a bit to get up and running.

npx create-next-stack will run an install with all the correct variables .. or

if you like the web:
create-next-stack.com/

Collapse
 
ixartz profile image
Remi W. โ€ข โ€ข Edited

Next JS Tailwind Template supports:

  • Tailwind CSS
  • VSCode configuration
  • Bundler Analyzer
  • Next-SEO
  • One-click deploy on Vercel or Netlify
  • etc.

If I'm not wrong, these options aren't proposed by Next stack. Depends to your needs...

Collapse
 
ceoshikhar profile image
Shikhar โ€ข

Wait! Have you been posting about the same thing over and over again to promote it? I thought that would never work. Great job on marketing.

Collapse
 
ixartz profile image
Remi W. โ€ข

It seems I post the same things again but actually, I've 5 open source projects to promote. Hope one day, it'll promote by itself ;)

The best way to debug slow web pages cover image

The best way to debug slow web pages

Tools like Page Speed Insights and Google Lighthouse are great for providing advice for front end performance issues. But what these tools canโ€™t do, is evaluate performance across your entire stack of distributed services and applications.

Watch video

๐Ÿ‘‹ Kindness is contagious

Please leave a โค๏ธ or a friendly comment on this post if you found it helpful!

Okay