Next.js + Prettier + Husky setup

Cut the crap and start directly Introduction Getting started is intentionally simple. You can create a new project with: npx create-next-app@latest . Enter fullscreen mode Exit fullscreen mode 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 can scale as the application grows. This guide walks through a complete baseline setup so that you can move from a freshly generated Next.js application to a clean development environment ready for full-stack development. Note: The exact prompts and defaults of create-next-app can change between Next.js releases. The commands below follow the current Next.js setup approach. Steps to Complete Setup 1. Prerequisites Before starting, make sure the following are installed. Node.js The current Next.js documentation requires Node.js 20.9 or newer. Check your installed version: node -v Enter fullscreen mode Exit fullscreen mode You should see a version equal to or greater than: v20.9.0 Enter fullscreen mode Exit fullscreen mode npm npm is installed along with Node.js. Verify it: npm -v Enter fullscreen mode Exit fullscreen mode Git Git is strongly recommended for version control and will also be used by Husky later. Check: git --version Enter fullscreen mode Exit fullscreen mode Code Editor Visual Studio Code is a good choice for Next.js development. Recommended extensions: ESLint Prettier - Code formatter Tailwind CSS IntelliSense Error Lens GitLens (optional) 2. Create the Next.js Application Create the project in the current directory: npx create-next-app@latest . Enter fullscreen mode Exit fullscreen mode The Next.js CLI will ask you several questions. For a modern full-stack application, the following setup is a good starting point: Option Recommended TypeScript Yes Linter ESLint React Compiler Based on project requirements Tailwind CSS Yes src/ directory Yes App Router Yes Import alias Yes Import alias value @/* AGENTS.md Optional The current create-next-app documentation lists TypeScript, Tailwind CSS, ESLint, App Router, and Turbopack among the recommended/default setup options. The CLI also supports an --import-alias option and can initialize a project inside src/. After the setup completes, start the development server: npm run dev Enter fullscreen mode Exit fullscreen mode Open: http://localhost:3000 Enter fullscreen mode Exit fullscreen mode If the default Next.js page appears, your application has been successfully created. 3. Initialize Git If Git has not already been initialized, run: git init Enter fullscreen mode Exit fullscreen mode Check the repository: git status Enter fullscreen mode Exit fullscreen mode Create the initial commit: git add . git commit -m "chore: initialize Next.js project" Enter fullscreen mode Exit fullscreen mode From this point onward, Git will track your project changes. 4. Install and Configure Prettier Why Prettier? Prettier automatically formats your code according to a consistent style. Without a formatter, different developers may write: const user={name:"John",age:25} Enter fullscreen mode Exit fullscreen mode while someone else writes: const user = { name: 'John', age: 25, }; Enter fullscreen mode Exit fullscreen mode Prettier removes this unnecessary discussion and keeps the codebase consistent. Install Prettier Install it locally: npm install --save-dev --save-exact prettier Enter fullscreen mode Exit fullscreen mode Using a local version means everyone working on the project uses the same formatter version. Create .prettierrc Create: .prettierrc Enter fullscreen mode Exit fullscreen mode Add: { "semi": true, "singleQuote": true, "trailingComma": "all", "tabWidth": 2, "printWidth": 100 } Enter fullscreen mode Exit fullscreen mode Create .prettierignore Create: .prettierignore Enter fullscreen mode Exit fullscreen mode Add: node_modules .next out dist coverage public *.lock Enter fullscreen mode Exit fullscreen mode Format the project Run: npx prettier . --write Enter fullscreen mode Exit fullscreen mode To check formatting without modifying files: npx prettier . --check Enter fullscreen mode Exit fullscreen mode 5. Integrate Prettier with ESLint Next.js projects can use ESLint for code-quality checks while Prettier handles formatting. Install the compatibility configuration: npm install --save-dev eslint-config-prettier Enter fullscreen mode Exit fullscreen mode Open: eslint.config.mjs Enter fullscreen mode Exit fullscreen mode A current flat-config setup can look like this: import { defineConfig, globalIgnores } from 'eslint/config'; import nextVitals from 'eslint-config-next/core-web-vitals'; import nextTs from 'eslint-config-next/typescript'; import prettier from 'eslint-config-prettier/flat'; export default defineConfig([ ...nextVitals, ...nextTs, prettier, globalIgnores([ '.next/**', 'out/**', 'build/**', 'next-env.d.ts', ]), ]); Enter fullscreen mode Exit fullscreen mode The important part is: import prettier from 'eslint-config-prettier/flat'; Enter fullscreen mode Exit fullscreen mode and: prettier, Enter fullscreen mode Exit fullscreen mode This disables ESLint rules that conflict with Prettier. Run ESLint: npm run lint Enter fullscreen mode Exit fullscreen mode Important: ESLint configuration can vary depending on the Next.js version and whether you selected ESLint or another linter during project creation. If your generated configuration differs, keep the Next.js-generated configuration and add the Prettier compatibility configuration rather than blindly replacing the entire file. 6. Add Useful npm Scripts Open: package.json Enter fullscreen mode Exit fullscreen mode Add or update the scripts: { "scripts": { "dev": "next dev --turbopack", "build": "next build", "start": "next start", "lint": "eslint .", "format": "prettier . --write", "format:check": "prettier . --check", "typecheck": "tsc --noEmit" } } Enter fullscreen mode Exit fullscreen mode You can now run: Development server npm run dev Enter fullscreen mode Exit fullscreen mode Linting npm run lint Enter fullscreen mode Exit fullscreen mode Format code npm run format Enter fullscreen mode Exit fullscreen mode Check formatting npm run format:check Enter fullscreen mode Exit fullscreen mode Type checking npm run typecheck Enter fullscreen mode Exit fullscreen mode Production build npm run build Enter fullscreen mode Exit fullscreen mode This gives you a useful set of commands for everyday development. 7. Set Up Husky and lint-staged Why Husky? You can manually remember to run: npm run lint npm run format:check npm run typecheck Enter fullscreen mode Exit fullscreen mode before every commit. But eventually, someone will forget. Husky allows Git hooks to automatically run commands at specific points in the Git workflow. For this setup, we will use a pre-commit hook. Install Husky and lint-staged npm install --save-dev husky lint-staged Enter fullscreen mode Exit fullscreen mode Initialize Husky: npx husky init Enter fullscreen mode Exit fullscreen mode This creates the .husky directory and a pre-commit hook. 8. Configure the Pre-commit Hook Open: .husky/pre-commit Enter fullscreen mode Exit fullscreen mode Replace its contents with: npx lint-staged Enter fullscreen mode Exit fullscreen mode Now configure lint-staged in package.json: { "lint-staged": { "*.{js,jsx,ts,tsx}": [ "eslint --fix", "prettier --write" ], "*.{json,css,md,yml,yaml}": [ "prettier --write" ] } } Enter fullscreen mode Exit fullscreen mode Now when you run: git add . Enter fullscreen mode Exit fullscreen mode and then: git commit -m "feat: add authentication" Enter fullscreen mode Exit fullscreen mode Husky runs the pre-commit hook. The hook runs lint-staged, which runs ESLint and Prettier only against the relevant staged files. This keeps commits cleaner without repeatedly processing the entire project. 9. Test Husky Create or modify a TypeScript file. Then: git add . Enter fullscreen mode Exit fullscreen mode Commit: git commit -m "test: verify git hooks" Enter fullscreen mode Exit fullscreen mode You should see lint-staged execute before the commit is created. If a linting error cannot be fixed automatically, the commit should fail. That is exactly what we want: broken code should not easily make its way into the repository. 10. Configure Environment Variables Full-stack applications usually require secrets and configuration values such as: Database connection strings API keys Authentication secrets External service URLs Create: .env.local Enter fullscreen mode Exit fullscreen mode Example: DATABASE_URL="postgresql://..." AUTH_SECRET="your-secret" API_KEY="your-api-key" NEXT_PUBLIC_APP_URL="http://localhost:3000" Enter fullscreen mode Exit fullscreen mode Server-only variables Variables such as: DATABASE_URL= AUTH_SECRET= API_KEY= Enter fullscreen mode Exit fullscreen mode should remain server-side. Public variables Variables prefixed with: NEXT_PUBLIC_ Enter fullscreen mode Exit fullscreen mode can be exposed to browser-side code. For example: NEXT_PUBLIC_APP_URL="http://localhost:3000" Enter fullscreen mode Exit fullscreen mode Do not put secrets behind NEXT_PUBLIC_. Create .env.example You should also create: .env.example Enter fullscreen mode Exit fullscreen mode Add placeholders: DATABASE_URL= AUTH_SECRET= API_KEY= NEXT_PUBLIC_APP_URL= Enter fullscreen mode Exit fullscreen mode This file can safely be committed and tells other developers which environment variables they need. Security: Never commit real API keys, database passwords, authentication secrets, or production credentials to Git. Troubleshooting Problem 1: node or npm is not recognized Check: node -v npm -v Enter fullscreen mode Exit fullscreen mode If the commands fail, Node.js is either not installed or its installation directory is not available in your system PATH. Install a supported Node.js version, restart your terminal, and try again. Problem 2: npx create-next-app@latest . fails First check your Node.js version: node -v Enter fullscreen mode Exit fullscreen mode The current Next.js requirement is Node.js 20.9 or newer. You can also check the CLI help: npx create-next-app@latest --help Enter fullscreen mode Exit fullscreen mode If you are creating the project in the current directory using: npx create-next-app@latest . Enter fullscreen mode Exit fullscreen mode make sure the directory does not already contain conflicting project files. Problem 3: Husky hook does not run Check that the project is a Git repository: git status Enter fullscreen mode Exit fullscreen mode Then initialize Husky again: npx husky init Enter fullscreen mode Exit fullscreen mode Verify: .husky/pre-commit Enter fullscreen mode Exit fullscreen mode contains: npx lint-staged Enter fullscreen mode Exit fullscreen mode Problem 4: lint-staged fails during commit Run it directly: npx lint-staged Enter fullscreen mode Exit fullscreen mode Then run the checks individually: npm run lint npm run format:check npm run typecheck Enter fullscreen mode Exit fullscreen mode Fix the reported problem, stage the changes again, and retry the commit. Problem 5: ESLint and Prettier conflict Make sure this package is installed: npm install --save-dev eslint-config-prettier Enter fullscreen mode Exit fullscreen mode Then make sure the Prettier compatibility configuration is included in your ESLint flat configuration. Problem 6: Prettier formats files that it should not touch Add generated directories to: .prettierignore Enter fullscreen mode Exit fullscreen mode For example: .next dist coverage Enter fullscreen mode Exit fullscreen mode Review the ignore file if generated or external files are being formatted unexpectedly. Problem 7: Git commit is rejected A rejected commit is often the expected behavior. Your pre-commit hook may have detected: ESLint errors Formatting problems Invalid staged files Another configured validation failure Run: npx lint-staged Enter fullscreen mode Exit fullscreen mode Fix the problem and commit again. Avoid bypassing hooks unless you have a specific reason to do so. Problem 8: Any other issue If you are facing any other issue apart from the above mentioned faq, feel free to drop them in the comments. Final Verification Before you start building features, run the complete baseline: npm run lint Enter fullscreen mode Exit fullscreen mode npm run format:check Enter fullscreen mode Exit fullscreen mode npm run typecheck Enter fullscreen mode Exit fullscreen mode npm run build Enter fullscreen mode Exit fullscreen mode If all four commands pass, you have a solid starting point for development. Conclusion With this setup, you now have: Next.js for the application framework TypeScript for type safety App Router for modern Next.js routing Tailwind CSS for styling ESLint for code-quality checks Prettier for consistent formatting Husky for Git hooks lint-staged for checking staged files Environment-variable conventions for configuration and secrets A scalable project structure for future features You can now add the application-specific pieces you actually need, such as PostgreSQL, Prisma or Drizzle, authentication, validation, testing, and CI/CD. The goal is not to install every possible tool on day one. The goal is to start with a clean, consistent foundation and add complexity only when the application requires it. Cheers! Happy coding