1. issue

npm run build를 하니 다음 에러가 발생했다.

error - ESLint: Failed to load plugin 'prettier' declared in '.eslintrc': Cannot find module 'eslint-plugin-prettier' Require stack: - /Users/juyoungjung/oms-web-admin_react/placeholder.js Referenced from: /Users/juyoungjung/oms-web-admin_react/.eslintrc

package.json에 eslint관련 devDependencies는 다음과 같았다.

  "devDependencies": {

          ...
          
    "eslint": "^7.26.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-plugin-import": "^2.23.2",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.23.2",
    "eslint-plugin-react-hooks": "^4.2.0",
    }

eslint-config-prettier를 설치하지 않아 발생한 문제였다.
nextjs version 11 에서는 next lint 명령어로 eslint 설정을 더 간단하게 할 수 있도록 도와준다고 공식문서에 나와 있어 따라해보기로 했다.

2. solution

"scripts": {
     
     ...
     
  "lint": "next lint"
}

          ...

  "devDependencies": {

          ...

    "eslint": "^7.26.0",
    "eslint-config-next": "12.0.1",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
}

npm run lint를 실행한 후 생성된 파일을 다음과 같이 수정하면서 나에게 필요한 설정들을 할 수 있다
.eslintrc.json

{
  "extends": ["next", "prettier"],//prettier 같이 쓰기
  "rules": {
    "react-hooks/exhaustive-deps": "off" //필요 없는 기능은 끄기
        ...
  }
}

출처:
https://nextjs.org/docs/basic-features/eslint