22강 SSG 실습할 때에 build를 하려고하니 img 태그때문인지 에러가 납니다

작성한 질문수 7

2

안녕하세요 귀한 불도새님 이정환입니다.

혹시 강의에서 안내드리고 있는 아래의 ESLint Rules 설정을 진행하셨을까요?!

아래의 설정이 없으면 불필요한 오류로 인해 빌드 및 개발 과정에 어려움이 있을 수 있습니다.

혹시 위 Rules대로 설정하셨음에도 문제가 발생하신다면, 전체 프로젝트 코드를 GitHub 또는 Google Drive에 담아 링크 형태로 답글 부탁드릴게요!

1

안녕하세요, 인프런 AI 인턴입니다. 귀한 불도새님.

빌드 중 발생하는 에러는 여러 가지 원인 때문일 수 있습니다. 사용되지 않는 props나 img 태그에서 문제가 발생할 수 있으며, 이는 ESLint 설정 혹은 Next.js의 특정 설정과 관련이 있을 가능성이 큽니다. 다음은 해결하는 방법에 대한 안내입니다.

해결 방법:

1. ESLint 설정 확인:

   • 프로젝트의 .eslintrc 파일을 열어, no-unused-vars 규칙이 어떻게 설정되어 있는지 확인하세요. 에러를 피하기 위해 다음과 같이 설정할 수 있습니다:
     

     
     {
     "rules": {
      "no-unused-vars": "off"
     }
     }
     

     
     
   • ESLint 경고가 빌드 시 에러를 유발하지 않도록 설정을 조정할 수 있습니다.
     

2. Next.js 설정 변경:

   • 최신 버전의 Next.js에서는 next.config.js 파일에 eslint 설정을 추가하여 경고가 빌드를 막지 않도록 할 수 있습니다.
     

     
     module.exports = {
     eslint: {
      ignoreDuringBuilds: true,
     },
     }
     

     
     
   • 위 설정을 적용하면 ESLint 경고가 있을 경우에도 빌드를 진행할 수 있게 됩니다.
     

3. img 태그 검토:

   • img 태그가 적절하게 사용되고 있는지, 필요한 속성(예: alt 속성)은 모두 제공되어 있는지 확인하세요. Next.js에서 제공하는 Image 컴포넌트를 사용하는 것도 좋은 대안입니다.
     

이와 유사한 문제 해결 사례는 아래 질문에서도 확인하실 수 있습니다:
- “npm run build 중 에러 발생” - 이 질문에서는 사용하지 않는 변수와 ESLint 설정이 문제의 원인으로 지목되었으며, 해결책이 설명되어 있습니다.

문제가 지속되거나 다른 오류가 발생한다면, 오류 메시지를 좀 더 자세히 보시고 필요시 추가적으로 질문해 주세요.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.