[Next.js] next.config.js 에러

현재 코드

이렇게 작성되어 있다.

Parsing 에러

"resource": "/home/leeyujeong/ArtGarden/client/next.config.js",
"owner": "eslint",
"severity": 8,
"message": "Parsing error: Cannot find module 'next/babel'\nRequire stack:\n- /home/leeyujeong/ArtGarden/client/node_modules/next/dist/compiled/babel/bundle.js\n- /home/leeyujeong/ArtGarden/client/node_modules/next/dist/compiled/babel/eslint-parser.js\n- /home/leeyujeong/ArtGarden/client/node_modules/eslint-config-next/parser.js\n- /home/leeyujeong/ArtGarden/client/node_modules/@eslint/eslintrc/dist/eslintrc.cjs\n\nMake sure that all the Babel plugins and presets you are using\nare defined as dependencies or devDependencies in your package.json\nfile. It's possible that the missing plugin is loaded by a preset\nyou are using that forgot to add the plugin to its dependencies: you\ncan workaround this problem by explicitly adding the missing package\nto your top-level package.json.",
"source": "eslint",
"startLineNumber": 1,
"startColumn": 1,
"endLineNumber": 1,
"endColumn": 1

여기서 핵심 문구는
Parsing error: Cannot find module 'next/babel' 일 것이다.

해결

우선 프로젝트 루트 경로에 .babelrc 파일을 생성한다.

해당 파일에 다음 코드를 작성한다.

{
  "presets": ["next/babel"],
  "plugins": []
}

루트 경로에 있는 .eslintrc.json 파일을 열어 코드를 아래와 같이 수정해준다.

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

참고) https://stackoverflow.com/questions/68163385/parsing-error-cannot-find-module-next-babel