라이브러리, 혹은 컴포넌트를 import할 때 해당 경로가 너무 길고 복잡한 경우가 있다.

import HeaderStyle from '../../../../styles/HeaderStyle';

위와 같은 복잡한 코드는 특정 디렉토리 구조를 알아보기 힘들 뿐만 아니라, 해당 파일이 어떤 역할을 하는지 이해하기 힘들다.

이 때 Next.js 의 경로를 절대경로(Absolute Path) 로 변경하면 위와 같은 기존 코드의 가독성 문제를 해결할 수 있다.

변경하는 방법은 다음과 같다.

BaseUrl Setting

baseUrl 옵션을 사용하여 기본 경로를 지정하면, 상대경로가 아닌 절대경로로 파일을 import 할 수 있다.

즉, base 가 되는 경로를 개발자가 직접 지정하여, 패키지 depth 와 비례하여 길어지는 import 문을 간결하게 표현할 수 있다.

baseUrl 은 jsconfig.json (TypeScript 사용시 tsconfig.json) 파일에서 다음과 같이 설정한다.

// jsconfig.json
{
  "compilerOptions": {
    // 경로는 . 또는 .src 등 해당 프로젝트에 맞게 설정
    "baseUrl": "."
  }
}

Alias Setting

baseUrl 설정 뒤 alias 를 추가로 설정한다면 depth 가 깊은 파일에 간결하게 접근할 수 있다.

alias 는 jsconfig.json 파일의 paths 옵션을 통해 설정한다.

// jsconfig.json
{
  "compilerOptions": {    
    "baseUrl": ".",
    // paths옵션을 추가하여 절대경로의 별칭을 설정
    "paths": {      
      "@components/*": ["components/*"],      
      "@pages/*": ["pages/*"],      
      "@styles/*": ["styles/*"]
    }
  }
}

위와 같이 특정 경로에 대한 alias 를 설정해주면, 다음과 같이 경로를 간단하게 import 할 수 있다.

// 상대 경로
import HeaderStyle from '../../../../styles/HeaderStyle/';

// 절대 경로
import HeaderStyle from '@styles/HeaderStyle';

참고 자료

Advanced Features: Absolute Imports and Module Path Aliases