Next.js 프로덕션모드 ESLint에러

Next.js 기반으로 개발 중인 프로젝트에서 로컬 서버로 테스트하던 중, 페이지 로딩 속도가 비정상적으로 느리다는 문제가 발생했습니다.
처음엔 API 응답이나 이미지 때문인가 했지만, 알고보니 개발자 모드와 프로덕션 모드가 따로 있었고 개발자 모드는 원래 느리다고 합니다. 그래서 프로덕션 모드로 테스트하려고 npx next build && npx next start를 시도하는 순간...

Could not find a production build in the '.next' directory.

 

난 분명 빌드를 했는데 왜 없는가?

ESLint 에러로 인해 빌드 자체가 실패하고 있었음

빌드를 다시 실행하면서 보니, 화면에는 수백 줄에 달하는 ESLint 에러가 쏟아졌습니다.

그냥 너 코드 별로야 라고 경고하는줄만 알았는데 빌드도 안되더라구요.

Error: Expected an assignment or function call and instead saw an expression.  @typescript-eslint/no-unused-expressions
Error: 'x' is assigned a value but never used.  @typescript-eslint/no-unused-vars
Error: Unexpected any. Specify a different type.  @typescript-eslint/no-explicit-any
...

이 에러들은 대부분 우리가 작성하지 않은 Prisma의 자동 생성 코드나 .next/, dist/ 등의 빌드된 파일에서 발생한 것이었습니다.

해결 방법

✅ 1. 개발자가 작성한 코드만 ESLint 검사 대상이 되게 설정

Next.js 13 이상에서는 eslint.config.ts 혹은 eslint.config.js에 FlatConfig 형식으로 ESLint를 설정합니다.

기존 설정:

const eslintConfig = [
  ...compat.extends("next/core-web-vitals", "next/typescript"),
];

수정된 설정:

const eslintConfig = [
  ...compat.extends("next/core-web-vitals", "next/typescript"),

  {
    // 검사하지 않을 경로들
    ignores: [
      "**/node_modules/**",
      "**/.next/**",
      "**/dist/**",
      "**/src/generated/**",  // Prisma 등 자동 생성 코드
    ],
  },

  {
    // 커스텀 규칙
    rules: {
      "@typescript-eslint/no-unused-vars": "off",
      "@typescript-eslint/no-explicit-any": "off",
      "@typescript-eslint/no-unused-expressions": "off",
      "@typescript-eslint/no-this-alias": "off",
      "@typescript-eslint/no-require-imports": "off",
    },
  },
];

이렇게 하면 ESLint가 우리가 직접 작성한 코드만 검사하고, 자동 생성된 JS 코드나 빌드 산출물은 무시합니다.

전 rules 까진 안했지만 커스텀 규칙 설정도 가능합니다.

저 설정(경로만 필터링하는)으로 빌드해서 직접 작성한 코드에서 발생한 에러들만 수정중입니다.

---

✅ 2. 빌드 시 ESLint 완전히 무시 (필요 시)

Next.js는 기본적으로 next build 시 ESLint 검사도 함께 수행합니다.
이게 부담된다면, next.config.ts에 아래 설정을 추가할 수 있습니다:

아예 꺼버리기엔 좋은 기능이라 생각해서

전 사이트가 얼마나 빨라지나 확인하려고 일단 저 설정을 하고 서버를 켜봤습니다.

누르는 순간 페이지가 로딩되더군요. 짱 빠릅니다.

const nextConfig = {
  eslint: {
    ignoreDuringBuilds: true,
  },
};

export default nextConfig;

 

 

✅ 3. 빌드 & 실행 정상 확인

npx next build
npx next start

이제 .next/ 폴더가 잘 생성되고, 프로덕션 모드로 로컬에서도 쾌적하게 테스트할 수 있습니다.

참고 링크

• Next.js ESLint 공식 문서
• ESLint Flat Config 공식 문서