Next.js 에서 module import 시 alias 사용하기 (절대경로)

Next.js 공식 문서에서도 소개하고 있다.

Advanced Features: Absolute Imports and Module Path Aliases | Next.js

얼마 전 기술면접 과제를 제출했는데 면접 볼 때 왜 상대경로로 작성했냐고 물어보셨다.
그동안은 그렇게 큰 프로젝트 작업해본 적이 없고 디렉토리 깊이도 아주 깊은 적이 없어서 크게 절대경로로 작성해야지 하고 생각해보지 않았는데 이번에 새로운 사이드 프로젝트를 진행하면서는 절대경로로 설정하고 작업해보려고 찾아봤다. 

아래의 설명은 JS 기준이다.

- jsconfig.json를 root에 생성해준다. 

- jsconfig.json에는 아래와 같이 작성 (이건 예시이고 자신이 "@components/" 이 부분은 자신이 원하는대로 작성)

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

baseUrl은 프로젝트의 root에서 바로 import 할 수 있게 해주기 때문에 절대경로 사용이 가능해진다. 
paths는 모듈 alias를 사용할 수 있게 해주는데 components/* 경로는 @components/*로 매핑된다. 

아래의 글을 읽어보는 것도 도움이 된다. 
https://dev.to/whitep4nth3r/how-to-avoid-using-relative-path-imports-in-next-js-eki

How to avoid using relative path imports in Next.js

- 서버를 재시작하여 jsconfig.json이 적용되도록 한다.

../../../../../를 피할 수 있다. 아주 편하고 간결하며 직관적이다. 👍