NextJS - 경로 alias 설정하기(typescript)

 

파일 트리의 깊이가 깊어졌을 때 파일을 import 하기가 번거롭습니다.

import Button '../../../../../../components/Button';

여기에 별칭을 설정하면 좀 더 간편하게 경로를 사용할 수 있습니다.

 

아래와 같이 tsconfig.json 파일의 컴파일 옵션에 baseUrl과 paths를 아래와 같이 추가/수정해주면 됩니다.

/* tsconfig.json */

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

 

이제 아래와 같이 사용할 수 있습니다.

import Button from '@/components/Button';