Next.js + 더 예쁜 + 허스키 설정

DEV Community · Aditya · 2026-09-03 개발(SW)

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

원문에서 계속 ↗

추출 본문 · 출처: dev.to · https://dev.to/extinctsion/nextjs-prettier-husky-setup-31h2

Next.js + 더 예쁜 + 허스키 설정

Introduction

Steps to Complete Setup

1. Prerequisites

Node.js

npm

Git

Code Editor

2. Create the Next.js Application

3. Initialize Git

4. Install and Configure Prettier

Why Prettier?

Install Prettier

Create .prettierrc

Create .prettierignore

Format the project

5. Integrate Prettier with ESLint

6. Add Useful npm Scripts

Development server

Linting

Format code

Check formatting

Type checking

Production build

7. Set Up Husky and lint-staged

Why Husky?

Install Husky and lint-staged

8. Configure the Pre-commit Hook

9. Test Husky

10. Configure Environment Variables

Server-only variables

Public variables

Create .env.example

Troubleshooting

Problem 1: node or npm is not recognized

Problem 2: npx create-next-app@latest . fails

Problem 3: Husky hook does not run

Problem 4: lint-staged fails during commit

Problem 5: ESLint and Prettier conflict

Problem 6: Prettier formats files that it should not touch

Problem 7: Git commit is rejected

Problem 8: Any other issue

Final Verification

Conclusion

더 많은 게시물

에피소드 1: “세상에 나타난 작은 점”

Create `.prettierrc`

Create `.prettierignore`

Create `.env.example`

Problem 1: `node` or `npm` is not recognized

Problem 2: `npx create-next-app@latest .` fails