Next.js import 정렬 설정

BEFORE

프로젝트시 은근히 거슬리는 import
저 react를 맨 위로 올리고 싶다!
그동안 크게 영향을 미치는 부분은 아니라 놔두었는데 정렬을 하지 않으면 프로젝트 진행 기간 동안 계속 저렇게 뒤섞이니 설정을 해보기로 합니다.

AFTER

한 줄 띄우기는 개인 취향입니다. 예전에 Python 프로젝트 진행시에도 PEP8에서 권장하는 import 순서로 lint를 활용해 설정했었는데, 언어마다 필요한 lint 도구와 추천 스타일이 다릅니다.

이번 포스팅에서는 Next.js 프로젝트에서 Eslint를 활용해 import 정렬하는 법을 배워보겠습니다.

사용 버전
"next": "15.3.1",
"react": "^19.1.0",
"@eslint/eslintrc": "^3.3.1",
"eslint": "^9.27.0",
"eslint-config-next": "15.3.1",
"eslint-plugin-simple-import-sort": "^12.1.1",

최근에 만들고 있는 블로그라 Next.js 15버전을 사용했습니다.

1. 패키지 설치

정렬에는 eslint-plugin-simple-import-sort을 사용해줬습니다.

eslint-plugin-import를 사용해도 되지만 위에 패키지가 좀 더 간편하게 설정할 수 있어 사용했습니다.

pnpm add -D eslint-plugin-simple-import-sort

개발 의존성으로 패키지를 설치해줍니다. 각 패키지매니저에 맞는 명령을 사용해 주세요.

2. ESLint 설정

최신 ESLint (v9+)는 eslint.config.js 또는 .mjs 형식의 Flat Config를 사용합니다. 저는 eslint.config.mjs 파일에서 아래와 같이 설정했습니다.

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

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

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

const simpleImportSort = (await import("eslint-plugin-simple-import-sort"))
  .default;

const eslintConfig = [
  ...compat.extends("next/core-web-vitals", "next/typescript"),
  {
    plugins: {
      "simple-import-sort": simpleImportSort,
    },
    rules: {
      "simple-import-sort/imports": [
        "error",
        {
          groups: [
            // React & Next.js
            ["^react", "^next"],
            // External packages
            ["^@?\\w"],
            // Absolute imports (like @/components)
            ["^(@|~)/"],
            // Relative imports
            ["^\\."],
            // Style imports
            ["^.+\\.s?css$"],
          ],
        },
      ],
      "simple-import-sort/exports": "error",
    },
  },
];

export default eslintConfig;

rules는 원하는대로 수정해서 사용하면 됩니다.

설정후, 아래 명령어로 전체 파일을 정리할 수 있습니다.

pnpm exec eslint . --fix

하지만 매번 명령어를 실행하기는 번거로우니 3번으로 갑니다.

3. VSCODE 설정

'Cmd + Shift + P' (Ctrl + Shift + P on Windows)를 눌러 Preference: Open User Settings(JSON)을 클릭해 settings.json 파일을 엽니다.

다음 설정 코드를 추가합니다.

  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "true"
  },

끝!

혼자 개발할 때도 다른 사람과 같이 코드를 짠다면 상대방도 보기 편하게 짜려고 항상 노력합니다. 환경 설정은 번거롭지만 한 번 설정해놓으면 프로젝트 전반에 일관성과 편리함을 제공합니다.