next.js import 경로 예쁘게 하기

개요

import withHandler from "../../../libs/server/withHandler";

import 경로가 깊어지면 위와 같은 일이 일어난다. next.js 에서 typescript 를 사용한다는 가정 하에 import 에 들어가는 경로를 ../../../ 과 같은 경로 없이 예쁘게 표현하려면 어떻게 해야 할까?

Step 1: baseUrl 지정하기

typescript 프로젝트에서 baseUrl 은 tsconfig.json 파일에서 정할 수 있다.

{
  "compilerOptions": {
    "baseUrl": ".",
    // ...
  }
}

Step 2: Paths 지정하기

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@libs/*": ["libs/*"],
      "@components/*": ["components/*"]
    },
    // ...
  }
}

사용할 경로의 alias 를 지정해주면 된다.

Step 3: 기존의 import 경로 바꾸기

import withHandler from "@libs/server/withHandler";

Step 4: Command + Shift + R 이용하기

Search 에 ../../libs 등을 찾아서 전부 replace 해준다.

Step 5: 정상작동 확인하기

마지막으로 앱이 정상작동하는지 확인한다.