0. 시작

내 프로젝트의 버전은 다음과 같다

Next.js 13.4.19 (Page Router)
TailwindCSS
TypeScript 5.2.2

• 해당 프로젝트를 생성 후, Next.config.js에서 에러 메시지가 발생을 했다.

1. 에러

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: "images.unsplash.com"
      }
    ]
  }
}

module.exports = nextConfig

/* @type {import('next').NextConfig} /
이 부분에서 제목의 에러 메시지가 발생하는걸 확인했다.

2. 해결 방법

• 우선 프로젝트의 루트 폴더에. babelrc를 생성한다

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

• 이후 eslintrc.json에도 수정 사항을 반영해 준다.

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

• 일단 이렇게 하면 에러 자체는 해결이 된다.

3. 왜 발생한걸까?

일단 왜 이 문제가 발생하는지 chatGPT에게 물어봤다, 도대체 왜 뜬금없이 babel을 문제로 잡는 걸까?

• 기본적으로 Next.js는 Babel을 통해 JS코드 변환 작업을 수행한다.
• 그러나 프로젝트에 Babel 관련 설정이 없다면 Next.js는 에러를 발생시킨다.
• 즉, Babel 관련 설정이 없거나, 누락될 경우 발생하는 문제다.
• babelrc와 eslintrc.json에 수정사항을 반영했고, 수정사항을 확인한 Next.js는 프로젝트에 babel 관련 설정이 있음을 확인했고, 해당 문제가 해결되었음을 간주한다.