에러 기록

next.js 에서 eslint 설정 문제

next.js 에서 eslint를 설정했음에도 불구하고 린트 규칙들이 적용되지 않았다.

해결 1. 플러그인 설치

1. next에서 지원하는 eslint plugin인 @next/eslint-plugin-next
2. eslint-config-next 설치
3. @typescript-eslint/eslint-plugin 설치
4. @typescript-eslint/parser 설치
5. prettier 적용을 위한 eslint-config-prettier, eslint-plugin-prettier 설치

해결 2. eslintrc.json 파일 설정

아래와 같이 플러그인들을 설정

"extends": ["next/core-web-vitals", "next", "prettier"],
"plugins": ["prettier", "@typescript-eslint/eslint-plugin"],

Parsing error : Cannot find module 'next/babel'

next.config.js에서 발생

next/babel이라는 모듈을 인식하지 못하는 문제

해결 1. vscode에서 여는 폴더 변경

백엔드와 프론트엔드 폴더가 같이 사용하는 레포지토리가 아닌, 프론트만 사용하는 폴더인 client 폴더를 vscode에서 열면 됩니다.

해결 2. eslintrc 파일 설정

extends에 "next/babel"을 추가한다. 최종적인 extends는 아래와 같다.

"extends": ["next/core-web-vitals", "next", "next/babel", "prettier"],