작성한 질문수 1

1

Minho Yang님의 제보를 통해 알아낸 새로운 소식과 함께 다시 답변 드리겠습니다.

아래의 답변은 무시해주세요 **

원래 14.x 버전대의 앱에서는 ESLint no-unused-vars 설정이 기본 해제되어 있기 때문에, 별도의 rules 설정을 하시지 않아도 문제가 발생하지 않았는데요, 버전이 계속하여 변경 되면서 ESLint 기본 rules 설정도 자꾸만 바뀌고 있는 것 같습니다.

이에 번거로우시겠지만 해당 오류가 발생하실 경우 말씀하신대로 아래와 같이 eslintrc.json 파일에 새로운 rules 옵션을 추가하시면 됩니다

{
  (... 중략)
  "rules": {
    "no-unused-vars": "off",
    "@typescript-eslint/no-unused-vars": "error"
  }
}

1

저는 Next.js 14.2.26 로 설치했는데 같은 현상이 나와서 이전 리엑트 강의를 참고하여 .eslintrc.json 파일에 설정을 추가하였습니다.

{
  "extends": [
    "next/core-web-vitals",
    "next/typescript"
  ],
  "rules": {
    "no-unused-vars": "off",
    "@typescript-eslint/no-unused-vars": "error"
  }
}

0

저도 페이지 라우팅 파트를 학습중입니다.
진행중 [id].tsx 파일에서는 같은 현상이 해결되지 않아 설정을 다시 수정했습니다.

{
  "extends": [
    "next/core-web-vitals",
    "next/typescript"
  ],
  "rules": {
    "no-unused-vars": "off",
    "@typescript-eslint/no-unused-vars": "off",
    "react-hooks/rules-of-hooks": "off"
  }
}

일단 빨간줄이 안나오기는 하는데 이렇게 놓고진행해도 될까요

0

Minho Yang

2025-04-04T02:09:31.496Z

이 설정으로 진행하면

"rules": {
    "no-unused-vars": "off",
    "@typescript-eslint/no-unused-vars": "error"
    //"react-hooks/rules-of-hooks": "off"
  }

 

[[...idx]].tsx 파일에서 이런 빨간줄이 표시됩니다.

였는데 글을 정리하다가 원인을 찾았습니다. 오타입니다.

page 의 첫글자가 소문자였습니다. (function page -> function Page)

감사합니다!

0

안녕하세요 이정환입니다.

우선 현재 2섹션 실습을 진행중인 Next.js 앱의 nextjs 버전이 15.x이지는 않은가요?

참고로 우리 강의에서는 페이지 라우터 섹션에 한해서는 14.x 버전으로 설치를 안내 드리고 있습니다 (2.1 챕터 6분 5초를 확인해 보세요) 현재 설치된 버전은 package.json 파일에서 확인하실 수 있습니다.

14.x 버전에서는 사용하지 않는 변수에 대해 오류를 표시하는 no-unused-vars 옵션이 기본 해제 되어 있어 오류가 발생하지 않는데요

15.x 버전에서는 no-unused-vars 옵션이 설정되어 있어서 사용하지 않는 변수를 선언하시면 오류가 발생하게 됩니다.

이를 해결하시려면 말씀하신대로 ESLint 설정 파일에 rules를 추가해 해당 옵션을 해제하시거나, 강의 진행과 동일한 버전인 14.x 버전으로 앱을 다시 생성하시는 걸 권장드립니다.