1. 프로젝트 생성

Next.js는 기본적으로 TypeScript를 지원하므로, 설치 과정에서 타입스크립트 관련 패키지도 함께 설치된다.

npx create-next-app

2. ESLint 설정

Next.js 프로젝트에는 기본 ESLint 설정이 포함되어 있지만, 추가 설정을 통해 더 정밀한 제어가 가능하다.

✅ 필수 패키지 설치

npm install --save-dev globals @eslint/js

✅ eslint.config.mjs 세팅

공식문서를 참고하여 필요에 따라 규칙을 추가하거나 수정한다.

https://eslint.org/docs/latest/rules/

import { dirname } from "path";
import { fileURLToPath } from "url";
import { FlatCompat } from "@eslint/eslintrc";
import js from "@eslint/js";
import globals from "globals";

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

const compat = new FlatCompat({
  baseDirectory: __dirname,
});

const eslintConfig = [
  js.configs.recommended,
  ...compat.extends("next/core-web-vitals", "next/typescript"),
  {
    languageOptions: {
      globals: {
        ...globals.browser,
        ...globals.node
      }
    },
    rules: {
      // 여기에 추가적인 규칙을 설정할 수 있습니다
      "no-unused-vars": "warn",
      "no-console": "warn"
    }
  }
];

export default eslintConfig;n

<aside> 💡

TIP

cmd+k로 커서AI를 통해 효과적인 rules를 추가해달라고 요청할 수도 있다.

이때, 1인 개발인지, 팀 개발인지 .. 이런 맥락을 함께 제공하는게 좋다.

1인 개발자가 효과적으로 @NextJS 프로젝트를 개발할 수 있도록 규칙을 설정해줘  

</aside>

✅ lint:fix 명령어 추가

package.json 에서 —fix 규칙을 추가하여 자동으로 수정할 수 있도록 명령어를 추가한다.

"scripts": {
  "lint": "next lint",
  "lint:fix": "next lint --fix"
}

✅ .vscode/settings.json 수정

다음 설정을 추가하면 저장할 때마다 자동으로 수정이 된다.