Next.js 에서 alias 설정하기

1. baseUrl 설정하기

• baseUrl 옵션을 사용하여 기본 경로를 지정해주면, 상대경로가 아닌 절대경로로 파일을 import 할 수 있습니다.
• 말그대로 base 가 되는 경로를 직접 설정함으로써, 패키지 depth 가 깊어질수록 구구절절 길어지는 import 문을 아주 짧게 나타낼 수 있게 됩니다.

baseUrl 설정하기

• tsconfig.json 또는 jsconfig.json 에서 아래와 같이 설정해줍니다.
• 경로는 . 또는 .src 등 해당 프로젝트에 맞게 설정해줍니다.

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

그러면 아래와 같이, components 하위의 파일들을 components/button 와 같은 절대경로로 import 할 수 있게 됩니다.

// ./src/components/button.js
export default function Button() {
  return <button>Click me</button>
}

// ./src/pages/index.js
import Button from 'components/button'

export default function HomePage() {
  return (
    <>
      <h1>Hello World</h1>
      <Button />
    </>
  )
}

2. alias 설정하기

• baseUrl 설정만으로는 부족한 경우들이 있습니다.
• 예를들어, ./src/components/v1/common/basic/button.js 와 같이 depth 가 깊은 파일에 접근해야하는 경우는 여전히 불편함이 있습니다.
• 이런 경우 alias 를 추가로 설정해주면 됩니다.

alias 설정하기 (paths)

• paths 옵션을 통해 설정합니다.

// tsconfig.json or jsconfig.json
{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@/basic/*": ["components/v1/common/basic/*"]
    }
  }
}

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

// ./src/components/v1/common/basic/button.js
export default function Button() {
  return <button>Click me</button>
}

// ./src/pages/index.js
import Button from '@/basic/button'

export default function HomePage() {
  return (
    <>
      <h1>Hello World</h1>
      <Button />
    </>
  )
}

참고

• Next.js 공식문서: https://nextjs.org/docs/advanced-features/module-path-aliases