나보려고 남기는 pnpm + nextjs 프로젝트 세팅

1. next.js 인스톨

pnpm create next-app@version

• 필자는 typescript, tailwind 신봉자이므로 이 둘은 꼭 설치한다.

 

2. ESLint, Prettier 인스톨

pnpm i -D eslint-config-prettier eslint-plugin-tailwindcss prettier

• eslint-config-prettier는 prettier와 eslint의 충돌을 막기 위해 설치한다..
• eslint-plugin-tailwindcss는 tailiwind 전용 린트 역할을 하는 플러그인이다.
• prettier는 모두다 아는(?) 그 포맷터이다.

설치 후 eslintrc, package.json, .prettierrc, .prettierignore에 스크립트 셋팅을 한다.

// .eslintrc.json

{
  "extends": [
    "next/core-web-vitals",
    "plugin:tailwindcss/recommended",
    "prettier"
  ]
}

// package.json

 "scripts": {
 	[...]
    "format": "prettier --write ."
  },

// .prettierrc

{
  "semi": false,
  "singleQuote": true,
  "endOfLine": "auto"
}

// .prettierignore

.next

 

3. husky, lint-staged

pnpx husky-init && pnpm install

• pnpx dlx husky-init에 의해 스크립트 셋팅이 끝난다. npm install을 해야 내 프로젝트에 huksy가 설치된다.

 

// package.json

{
 [...]
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "prettier --write",
      "eslint --fix --max-warnings=0"
    ]
  },
 [...]
}

• package.json에 "lint-staged" 스크립트 설정을 한다.
• package.json에 설정해놓으면 npx로 접근해서 스크립트 실행이 가능하다.

 

// .husky/pre_commit

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

npx lint-staged

• pre_commit은 commit이 되기 전에 실행되는 hook이다.
• commit이 일어나기 전에 실행하고싶은 프로젝트 내 스크립트 명령어를 적어두면 된다.
• 커밋 직전에 staged 상태인 코드의 린트와 포맷팅을 할 것이므로 npx lint-staged를 적어둔다.

 

출처 : 내 마음속의 사부님 velog

https://velog.io/@sangmin4208/Next.js-%EC%B4%88%EA%B8%B0-%EC%85%8B%ED%8C%85

Next.js 초기 셋팅