NextJS15 빌드시 오류가 너무 많이 나오는 경우 대처방법

✅ 1. 빌드 시 Lint 오류를 확인하고 맞추는 방법

빌드시 오류가 발생하는 주요 원인은 다음과 같습니다:

1. ESLint 규칙 위반: 개발 환경에서는 경고로 표시되지만, 빌드시 오류로 간주될 수 있음.
2. TypeScript 오류: next dev에서는 일부 오류를 무시하지만, next build에서는 엄격하게 적용됨.
3. 서버/클라이언트 구성 오류: use client 또는 use server를 잘못 설정한 경우.
4. React Strict Mode 또는 App Router 환경에서 더 엄격한 규칙이 적용됨.

🚀 해결 방법

✅ 방법 1: next lint를 빌드 전에 실행하기

next build를 실행하기 전에 Lint 오류를 먼저 확인하는 것이 중요합니다.
다음 명령어를 실행하여 Lint 오류를 확인하세요:

bash

복사편집

next lint

이 명령어를 실행하면 Next.js가 적용한 ESLint 규칙을 검사합니다.

---

✅ 방법 2: package.json에서 빌드 전 next lint 실행하기

빌드 전에 ESLint를 자동으로 실행하여 오류를 방지하려면, package.json의 scripts 섹션을 다음과 같이 수정합니다.

json

복사편집

{ "scripts": { "dev": "next dev", "build": "next lint && next build", "start": "next start" } }

이렇게 하면 next build를 실행하기 전에 next lint를 실행하여 Lint 오류가 있는 경우 빌드가 진행되지 않도록 방지할 수 있습니다.

---

✅ 방법 3: Lint 오류 자동 수정 (--fix 옵션 사용)

Lint 오류를 자동으로 수정하려면 다음 명령어를 실행하세요.

bash

복사편집

next lint --fix

이렇게 하면 수정 가능한 Lint 오류가 자동으로 고쳐지므로 빌드 오류를 줄일 수 있습니다.

---

✅ 2. 빌드시 ESLint 오류 무시하는 방법

만약 ESLint 오류 때문에 빌드가 중단되는 것이 부담스럽다면, .eslintrc.json에서 next/core-web-vitals 규칙을 완화할 수 있습니다.

eslintrc.json 수정 예시:

json

복사편집

{ "extends": ["next/core-web-vitals"], "rules": { "react-hooks/exhaustive-deps": "warn", // 경고로 변경 (기본값: "error") "no-console": "off", // 콘솔 로그 허용 "import/no-anonymous-default-export": "off" // 익명 함수 내보내기 허용 } }

이렇게 하면 ESLint가 덜 엄격해져서 빌드 오류가 줄어들 수 있습니다.

⚠ 주의: Lint 오류를 무시하면 예상치 못한 버그가 발생할 수 있으므로 신중하게 조정하세요.

---

✅ 3. TypeScript 오류도 같이 체크하기

빌드시 TypeScript 오류도 함께 확인하려면, tsc 명령어를 실행하세요.

bash

복사편집

tsc --noEmit

또는 package.json에 추가하여 빌드 전에 TypeScript 오류를 검사할 수도 있습니다.

json

복사편집

{ "scripts": { "build": "next lint && tsc --noEmit && next build" } }

이렇게 하면 Lint 및 TypeScript 오류를 모두 체크한 후 빌드할 수 있습니다.

---

✅ 4. 빌드시 strict mode 해제 (비추천)

Next.js 15에서는 기본적으로 strictMode가 활성화되어 있어 빌드시 오류가 발생할 수 있습니다.
이 설정을 해제하면 일부 빌드 오류가 사라질 수 있지만, 권장되지 않습니다.

next.config.js 수정:

js

복사편집

module.exports = { reactStrictMode: false, };

🚨 주의: 이 방법은 엄격한 오류 검사를 해제하는 것이므로, 실제 코드 품질이 낮아질 수 있습니다.

---

🎯 최종 정리

방법설명

next lint 실행	빌드 전에 Lint 오류를 직접 확인
next build 실행 전에 next lint 추가	Lint 오류가 있을 경우 빌드 중단
next lint --fix 실행	자동으로 Lint 오류 수정
.eslintrc.json에서 규칙 완화	특정 ESLint 규칙을 warn 또는 off로 변경
tsc --noEmit 실행	TypeScript 오류도 함께 검사
reactStrictMode: false 설정	(비추천) Strict Mode 해제

가장 추천하는 방법은 next lint && next build를 실행하는 것이며, 필요하면 .eslintrc.json에서 일부 규칙을 완화하는 것이 좋습니다. 🚀