[Next.js] ../ 때문에 길어지는 import문은 별칭 절대경로 @ 사용하기

Absolute Imports and Module Path Aliases

프로젝트를 하면 어떤 라이브러리 혹은 컴포넌트를 import하는 일이 많습니다. 일반적으로 `import Somthing from '../../components/Something'` 과 같은 형식으로 상대경로를 이용해서 불러옵니다. 

 

프로젝트 규모가 커질 수록, 생성되는 폴더 및 파일이 많아질수록 depth가 깊어져 아래와 같이 import문이 굉장히 길어질 수 있습니다.

import Something from '../../../../components/common/layout/Something/';
import SubThing from '../../../../components/common/base/SubThing/';

보기 불편할 뿐더러 지저분해 보이기까지도 한다. 따라서 이럴 때 경로를 `절대경로`와 `별칭`을 사용하여 간단하게 표현할 수 있다.

 

jsconfig.json / tsconfig.json 생성

프로젝트에 맞게 config 파일을 생성해주고, 다음 내용을 추가해줍니다.

 

📜 jsconfig.json

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

`baseUrl`을 "."으로 해서 root 디렉토리를 baseUrl이 되도록 설정합니다. 그리고 @/components는 components 폴더를 의미하는 별칭으로 설정했습니다.

 

위와 같이 설정해주면 다음과 같이 수정해줄 수 있습니다.

> before
import Layout from '../../components/Layout'

> after
import Layout from '@components/Layout'

 훨씬 간략하고 보기 편하다고 생각이 듭니다 :)