Next.js에서 path alias 설정하기 (feat. @/components)

안녕하세요.

오늘은 Next.js에서 import 시 복잡한 relative path 대신 absolute path 사용을 위한 설정법을 알아봅시다.

들어가며

../../../../style/global.scss is not found ...

우리는 개발을 할 때 import를 매우 자주 사용하곤 합니다.

file path를 상대경로로 지정하다보면 유지보수면에서도 복잡하고,
path를 지정할 때마다 경로가 헷갈려서 발생하는 오류는 덤입니다.

이럴 때 path에 대한 alias를 설정하면 코드는 확 깔끔해질 것입니다.

아래 예제를 통해서 따라해봅시다.

설정하기

1. jsconfig.json 파일 생성

프로젝트 루트 폴더에 jsconfig.json을 생성해주세요. 파일에서 몇 가지 옵션을 부여할 것입니다.

2. alias 추가하기

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

위와 같이 compilerOptions를 추가하면 컴파일러는 등록된 alias를 마주할 때마다 path로 치환하게 됩니다.

3. 사용해보기

import SomeComponent from '@/components/SomeComponent'

// ...codes below

alias를 추가하였다면 위처럼 매우 쉽게 사용할 수 있습니다.