Ultimate Guide to Setup Next.js Project Structure, Husky, Prettier, Lint-staged, Tailwind, Shadcn

Ravi Sharma
7 min readSep 8, 2024
Next.js Project Structure — JavaScript Centric

Grab your code editor, and let’s transform your workflow with one of the most popular React frameworks available today- NEXT.JS!

In this step-by-step guide, I’ll walk you through everything you need to know to kickstart your Next.js project. From setting up the basics to implementing advanced tools like Tailwind CSS, Husky, Prettier, lint-staged, and Shadcn-ui library, this guide will ensure your development environment is efficient and scalable.

Points that we are going to cover in this article:

  • Prerequisites.
  • Setting Up Your Environment
  • Creating a New Next.js Project
  • Setting up Project Structure
  • Environment Variables Setup
  • Setting up Prettier
  • Setting up Husky
  • Setting up Lint-staged
  • Setting up Shadcn library
  • Next.js Plugins and Add-ons

1. Prerequisites

Before setting up a Next.js project, ensure you have the following:

  • Node.js: Download and install from nodejs.org.
  • npm or yarn: npm comes…

--

--