Next.js에서 경로 별칭(Alias) 사용하기

Next.js 프로젝트에서 모듈 import 시 경로 별칭(alias)를 사용하는 방법에 대해 알아보겠습니다. 이 기능을 활용하면 코드의 가독성을 높이고, 프로젝트의 구조 변경에도 유연하게 대응할 수 있습니다.

alias란?

경로 별칭(alias)는 특정 디렉토리에 대한 단축 이름입니다. 상대적인 파일 경로를 반복해서 입력하는 것이 번거롭거나 혼동을 줄 때, 절대 경로를 지정하여 간단하게 해당 파일이나 디렉토리를 참조할 수 있게 합니다.

 

Next.js에서는 웹팩(Webpack)의 resolve.alias 설정을 통해 alias를 지정할 수 있습니다. 이를 위해 먼저, 프로젝트 루트 디렉토리에 next.config.js 파일을 생성합니다. 그 다음, 웹팩 설정을 추가합니다.

 

const path = require('path')

module.exports = {
    webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
        config.resolve.alias['@components'] = path.join(__dirname, 'components')
        config.resolve.alias['@/lib'] = path.join(__dirname, 'src/lib')
        // 필요한 만큼 alias 추가...

        return config
    },
}

 

@components라는 alias를 생성하여 components 디렉토리와 연결했습니다. 이를 통해 소스 코드 내 어디에서든 @components/ComponentName 형태로 컴포넌트를 import 할 수 있게 됩니다. 코드에서 path.join(__dirname, 'components') 부분은 next.config.js 파일이 위치한 디렉토리와 'components' 디렉토리의 절대 경로를 합치는 역할을 하며, 이 방법을 사용하면 ../../../ 같은 방식으로 import하는 것보다 가독성을 높일 수 있습니다.

 

import MyComponent from '@components/MyComponent'

import MyComponent2 from "../../../components/MyComponent2"

 

주의 사항

Next.js가 내부적으로 사용하는 웹팩 설정을 직접 수정하는 것입니다. 특정 버전의 Next.js와 호환되지 않거나 예상치 못한 부작용이 발생할 수 있으니 주의가 필요합니다. 항상 확인 후 사용해야 합니다.

 

마무리

Next.js에서 alias를 설정하면 파일을 import할 때 상대 경로를 사용하는 대신 짧고 명확한 alias를 사용할 수 있습니다. 이는 코드의 가독성을 높이고, 프로젝트의 구조 변경에도 유연하게 대응할 수 있도록 도와줍니다. 다음에는 또 다른 Next.js 팁으로 찾아뵙겠습니다!