ESLint와 Next.js 빌드 오류 해결하기

Next.js 프로젝트에서 ESLint를 사용하고 있다면, next build 실행 시 ESLint 오류가 있을 경우 프로덕션 빌드가 실패하는 걸 경험해봤을 거예요. 이건 Next.js가 기본으로 빌드 단계에서 ESLint 검사를 해서, 오류가 있으면 빌드를 중단하기 때문이죠.

그런데 가끔은, 빌드가 꼭 성공해야 할 상황에서 ESLint 오류가 있어도 일단 빌드는 통과시키고 싶을 때가 있잖아요? 이럴 땐 Next.js 내장 ESLint 검사 기능을 완전히 비활성화할 수 있어요. 다만, 이 방법은 이미 ESLint를 다른 워크플로우(예: CI, 프리커밋 훅 등)에서 따로 검사하고 있을 때만 권장됩니다.

ESLint 검사 비활성화 방법

프로젝트 루트에 있는 next.config.js 파일을 열고, 아래와 같이 eslint.ignoreDuringBuilds 옵션을 활성화해 주세요:

// next.config.js
module.exports = {
  eslint: {
    ignoreDuringBuilds: true,
  },
};

이렇게 하면 빌드할 때 ESLint 오류가 있어도 무시하고 빌드를 계속 진행해줍니다.

만약 ESLint를 아예 끄고 싶다면?

next build뿐 아니라 개발 중에도 ESLint 경고/오류가 안 뜨게 하고 싶다면, next.config.js에서 eslint 옵션을 더 강하게 조절해야 합니다.
또는 .eslintrc 설정 자체를 너무 엄격하지 않게 바꾸는 방법도 있지만, 권장하지 않아요.
가능하면 코드를 깨끗하게 유지하는 것이 장기적으로 개발 생산성에 훨씬 좋으니, ESLint 오류는 최대한 빨리 해결하는 걸 추천합니다.

추가 팁!

CI(Continuous Integration) 환경에서 별도로 ESLint를 돌리고 있다면, Next.js 내장 ESLint를 끄는 것이 더 효율적입니다.
프리커밋 훅(husky + lint-staged)을 사용하면 커밋 전에 ESLint 검사로 코드 질을 확보할 수 있어요.
만약 ESLint 오류가 많아서 빌드가 자꾸 실패한다면, 이 옵션을 임시방편으로 켜고 문제를 하나씩 해결해 나가세요!

요약

내용	설명
기본 동작	ESLint 오류 있으면 Next.js 프로덕션 빌드 실패
빌드 중 ESLint 검사를 무시하려면	`next.config.js`에 `eslint.ignoreDuringBuilds: true` 설정
권장 방법	코드 품질을 위해 ESLint 오류는 최대한 빨리 수정
대안	CI나 프리커밋 훅에서 별도로 ESLint 검사 설정

이렇게 Next.js에서 ESLint 오류 때문에 빌드 실패해서 당황스럽던 분들은, ignoreDuringBuilds 옵션을 기억해두시면 꽤 편리할 거예요! 하지만 항상 코드 퀄리티 관리도 잊지 마시고요. Happy coding! 🚀

자, 위 코드는 Next.js 프로젝트에서 ESLint 설정하는 부분인데요.

module.exports = {
  eslint: {
    // Warning: This allows production builds to successfully complete even if
    // your project has ESLint errors.
    ignoreDuringBuilds: true,
  },
}

설명하자면, ignoreDuringBuilds: true 옵션은 빌드할 때 ESLint 에러가 있어도 빌드를 멈추지 않고 계속 진행하게 해줍니다. 즉, 코드에 문법적 문제나 스타일 가이드 위반이 있어도 생산용 빌드가 성공하도록 허용하죠.

이게 왜 필요하냐면, 가끔 프로젝트를 배포해야 하는데 ESLint 문제 때문에 빌드가 멈춰버리면 난감할 때가 있어요. 그래서 임시방편으로 이 옵션을 켜두고 빌드 성공을 할 수도 있죠. 하지만 권장하는 방법은 절대 아닙니다!

추천 팁!
빌드 성공은 중요하지만 더 중요한 건 코드 품질입니다. 가능하면 ignoreDuringBuilds를 false로 두고 로컬 환경에서 ESLint를 철저하게 점검하는 게 좋아요. CI(Continuous Integration) 파이프라인에 ESLint 검사를 추가해서 문제 발생시 바로 잡는 습관을 들이길 권해요.

마지막으로 Next.js에서 ESLint 관련 더 자세한 설정이나 자동 수정 기능 같은 것도 있으니 공식 문서도 한번 훑어보세요.

그럼 오늘도 좋은 코딩 하세요! 🚀

ESLint 8 최신 버전에서 실무에 바로 활용하는 방법

ESLint와 Next.js 빌드 오류 해결하기

ESLint 검사 비활성화 방법

만약 ESLint를 아예 끄고 싶다면?

추가 팁!

요약