[Next.js] import 경로에 @별칭 사용하기

import 절대 경로 & 경로 별칭

next.js 프로젝트 시 tsconfig.json 옵션을 통해 경로를 별칭으로 지정하여 가독성을 높일 수 있다.

 

import 절대 경로

// tsconfig.json / jsconfig.json

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

tsconfig.json 또는 jsconfig.json 파일에서 baseUrl 옵션에 절대경로로 가져올 경로를 작성한다.

[ic]"baseUrl":"./src"[/ic] 작성 시 아래와 같이 import 경로를 사용할 수 있다.

 

전

후

 

import 경로 별칭

// tsconfig.json / jsconfig.json

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

tsconfig.json 또는 jsconfig.json 파일에서 paths 옵션에 별칭으로 사용할 경로를 작성한다. 

위와 같이 작성하면 [ic]./src/*[/ic] 에 해당하는 경로는 [ic]@/*[/ic]로 사용이 가능하다.

 

전

후

 

참고

https://nextjs.org/docs/pages/building-your-application/configuring/absolute-imports-and-module-aliases

Configuring: Absolute Imports and Module Path Aliases | Next.js