에러 기록

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"],

React를 import하지 않았을 때의 오류

next에서는 import React from 'react' 를 작성하지 않아도 되지만, eslint를 적용한 이후에는 발생했습니다.

따라서 eslintrc.json 파일의 rules에 아래와 같이 설정을 추가했습니다.

"react/react-in-jsx-scope": 0