{
  "id": 5136174,
  "title": "Next.js + Prettier + Husky setup",
  "url": "https://urgent.news/2026/09/02/next-js-prettier-husky-setup",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-09-02T17:37:24.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/extinctsion/nextjs-prettier-husky-setup-31h2"
  },
  "original_language": "en",
  "account": "Introduction\n\nSetting up a Next.js project with Prettier and Husky can streamline the development process, ensuring consistent code formatting, linting, and version control. This guide walks through the steps to create a clean development environment for full-stack development.\n\nPrerequisites\n\nBefore starting, ensure that Node.js 20.9 or newer is installed. Verify the version by running `node -v`. npm should be installed along with Node.js; verify it using `npm -v`. Git is recommended for version control and will be used by Husky later. Check its version with `git --version`. Visual Studio Code is a good choice for Next.js development, along with recommended extensions such as ESLint, Prettier, Tailwind CSS IntelliSense, Error Lens, and GitLens (optional).\n\nCreating the Next.js Application\n\nTo create a new Next.js project, run `npx create-next-app@latest` in the current directory. The Next.js CLI will prompt you with several questions. For a modern full-stack application, select TypeScript as the language, ESLint as the linter, Tailwind CSS as the styling framework, and enable the App Router. The CLI also supports an --import-alias option and can initialize a project inside the src/ directory. After completing the setup, start the development server by running `npm run dev` and open http://localhost:3000 to verify the application has been successfully created.\n\nInitialization and Configuration\n\nInitialize Git by running `git init` and check the repository status with `git status`. Create the initial commit with `git add .` and `git commit -m \"chore: initialize Next.js project\"`. From this point onward, Git will track your project changes.\n\nInstall and configure Prettier, a tool that automatically formats your code according to a consistent style. Install it locally using `npm install --save-dev --save-exact prettier`. Create a `.prettierrc` file with the desired formatting options, such as `semi`, `singleQuote`, `trailingComma`, `tabWidth`, and `printWidth`. Create a `.prettierignore` file to specify files and directories to ignore during formatting, such as `node_modules`, `.next`, `out`, `dist`, `coverage`, `public`, and any lock files. Finally, format the project by running `npx prettier . --write` to ensure all files are formatted consistently. To check the formatting without modifying files, use `npx prettier . --check`.",
  "summary": "Cut the crap and start directly Introduction Getting started is intentionally simple. You can create a new project with: npx create-next-app@latest . That's enough to create a Next.js project . But creating the project is only the first step. For a real application, you will usually want consistent code formatting, linting, Git hooks, environment-variable conventions, and a project structure that…",
  "key_points": [
    "Create Next.js project with TypeScript, ESLint, Tailwind CSS, App Router",
    "Initialize Git and commit initial project setup",
    "Install and configure Prettier with formatting rules and ignore patterns"
  ],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}