Next.js App Router + Tailwind + Prettier + ESLint + husky 세팅하기

Next.js App Router 개발환경 세팅하기

이번엔 Next.js App Router 연습도 할 겸, 새 프로젝트를 시작했다!
세팅은 매번 헷갈릴 수 있어서 한 번에 정리해두려고 한다.
설정하면서 기록도 남기면 나중에 다시 참고하기 편하니까 블로그에도 써보는 중 😎

 

0. 프로젝트 생성 (Next.js + App Router)

https://tailwindcss.com/docs/installation/framework-guides/nextjs

Install Tailwind CSS with Next.js

 

App Router 기반으로 시작했고, 타입스크립트 + Tailwind + ESLint도 한 번에 세팅됨!

pnpm create next-app@latest my-app --ts --tailwind --eslint --app

1. Prettier & ESLint 설정

코드 스타일 통일은 필수! Prettier로 포맷 자동화하자.

pnpm add -D prettier eslint-config-prettier eslint-plugin-prettier

 

tailwind 클래스 정렬도 자동화되게 prettier-plugin-tailwindcss 설치!

pnpm add -D prettier-plugin-tailwindcss

 

https://github.com/tailwindlabs/prettier-plugin-tailwindcss

GitHub - tailwindlabs/prettier-plugin-tailwindcss: A Prettier plugin for Tailwind CSS that automatically sorts classes based on

 

2. .prettierrc 파일 생성

{
  "singleQuote": true,
  "semi": false,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80,
  "arrowParens": "always",
  "endOfLine": "lf",
  "plugins": ["prettier-plugin-tailwindcss"]
}

 

이렇게 하면 tailwind 클래스 순서도 정리되고, 줄바꿈 스타일도 깔끔하게 유지됨!

(현재 위의 prettierrc 내 맞춤 전용이다. 나중에 협업할 때는 팀원들과 함께 정해야 함!)

 

prettier 옵션에 관한... 👇👇

https://prettier.io/docs/options.html

Options · Prettier

 

3. ESLint 설정 커스터마이징

Next.js 기본 ESLint 설정에 Prettier 연동을 위해 eslint.config.mjs 수정함!

import { dirname } from 'path'
import { fileURLToPath } from 'url'
import { FlatCompat } from '@eslint/eslintrc'
import prettierPlugin from 'eslint-plugin-prettier'
import prettierConfig from 'eslint-config-prettier'

const __filename = fileURLToPath(import.meta.url)
const __dirname = dirname(__filename)

const compat = new FlatCompat({
  baseDirectory: __dirname,
})

export default [
  // 기본 Next.js + TypeScript 설정
  ...compat.extends('next/core-web-vitals', 'next/typescript'),

  // Prettier 연동
  {
    files: ['**/*.{js,ts,jsx,tsx}'],
    plugins: {
      prettier: prettierPlugin,
    },
    rules: {
      'prettier/prettier': 'error',
    },
  },

  // Prettier 룰 무력화 (중복 방지)
  prettierConfig,
]

4. Husky로 pre-commit 훅 설정 (선택사항)

커밋 전에 자동으로 lint랑 prettier 실행되게 하고 싶어서 Husky도 세팅해봤다.

❓Husky = Git hooks 자동화 도구
커밋 전 자동 검사 등으로 더 깔끔하고 안정적인 코드를 유지할 수 있게 도와준다.

 

1. husky 설치

pnpm add -D husky

 

2. husky 초기화

pnpm dlx husky-init

 

3. husky 활성화

pnpm install

 

.husky 폴더와 pre-commit 훅이 자동으로 생성됨. package.json에도 prepare 스크립트가 추가된다!

package.json 스크립트 등록

"scripts": {
  "lint": "eslint . --ext .js,.ts,.tsx --fix",
  "prettier": "prettier --write ."
}

커밋 전에 lint + prettier 자동 실행되게 설정

npx husky set .husky/pre-commit "pnpm run lint && pnpm run prettier --write"

5. 기존 파일들도 포맷팅 적용

초기 생성된 파일들에는 규칙이 안 먹혀 있을 수 있어서 한 번 전체 포맷팅 돌려줬음.

pnpm run prettier

💡 VSCode 유저를 위한 팁

자동 저장할 때 포맷도 같이 되게 하려면 settings.json에 아래 설정 추가하자!

"editor.formatOnSave": true

이거 하나면 저장할 때마다 prettier가 자동으로 적용된다!

세팅 완료!

(아래는 변수를 정의하고, 쓰지 않을 때의 상황을 만들어봤다. eslint 오류에 걸리기 때문에 husky가 오류가 있다고 알려듐!)

아래 사진처럼 add는 되었지만 commit이 되기 전, 오류가 있다고 알려주는 것!

 

-> 코드 중 오류가 있으면 바로 husky가 오류로그를 띄워준다!

 

⚠️ husky 설정 후 커밋이 계속 로딩만 되고 안 되는 경우?

현재 .husky 폴더의 pre-commit 파일을 보았다.

모든 파일에 대해 prettier를 계속 덮어쓰기 때문에 git이 계속 파일 변경으로 인식하고 커밋 검사를 계속해서 돌리는 것 같다. 

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

pnpm run lint && pnpm run prettier --write

 

해결방법))

lint-staged 같이 쓰기!!

 

1. lint-staged 설치

pnpm add -D lint-staged

 

2. package.json파일에 아래 코드 추가하기

"lint-staged": {
  "*.{js,ts,tsx,json,css,md}": [
    "eslint --fix",
    "prettier --write",
    "git add"
  ]
}

 

3. .husky/pre-commit에서

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

pnpm exec lint-staged

 

-> 이렇게 하면 수정된 파일만 lint와 prettier가 자동으로 적용되기 때문에 커밋 무한루프가 안 돌고, 빠르게 커밋이 된다! 

---

 

 

최종폴더에는...👇👇

 

개발환경 세팅은 귀찮지만 해두면 진짜 오래 써먹는다. 특히 팀 프로젝트 하거나 PR 날릴 때 완전 편함.

다음에도 까먹지 말고 잘 써먹자 🙋‍♀️