Nextjs typescript 절대경로 설정하기

시작하기

상대경로를 사용할 시 패키지 구조가 깊어질 경우 import시에 많이 번거로워지게 됩니다.
작은 규모의 어플리케이션이라면 상관없지만 규모가 커질수록 꼬이기 쉬워집니다.

상대경로

1
import Acomponent from ‘../../../../component/Acomponent’;

절대경로

1
import Acomponent from ‘src/component/Acomponent';

설정하기

tsconfig파일의 baseUrl을 "."으로 바꾸고 include에 "**/*.tsx"도 추가해줍니다.

tsconfig.json
1
2
3
4
5
6
7
8
9
10
11
12
13
{
//...
"baseUrl": ".",
//...
"exclude": [
"node_modules"
],
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx"
]
}

대부분 이것만 설정해도 절대경로로 사용할수 있습니다.
만약 안될시에는 다음 방법을 사용해봅니다.

next.config.js파일에서 webpack부분을 추가합니다.

next.config.js
1
2
3
4
5
6
{
webpack(config) {
config.resolve.modules.push(__dirname); // 추가
return config;
}
}

이제 import사용시 src로 시작할수 있게 되었습니다.
example)

1
import Test from "src/components/Test";
Share