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";

여기까지만 해도 충분히 간편하게 경로를 설정할 수 있습니다.

경로를 폴더별로 구분하기

다음 방법을 이용하면 폴더별로 더욱 쉽게 경로를 관리할 수 있습니다.
src/component/~~~와 같이 절대경로로 작성되어도 길어보이는 것은 같습니다.
이것을 더욱 짧고 간결하게 하기위해서 설정을 몇가지 해보겠습니다.
nextjs에서는 설정하기 위해서는 몇가지 파일을 수정해주어야 합니다.

  • @components: 컴포넌트
  • @hooks: 전역으로 사용하는 훅스
  • @services: api 서비스
  • @utils: 자주사용하는 함수 및 상수들

next.config.js

next.config.js 파일을 수정해줍니다.

next.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const path = require('path');
// ...
const nextConfig = phase => {
//...
webpack(config, { webpack }) {
config.resolve = {
alias: {
'@services': path.resolve(__dirname, 'src/services'),
'@utils': path.resolve(__dirname, 'src/utils'),
'@hooks': path.resolve(__dirname, 'src/hooks'),
'@components': path.resolve(__dirname, 'src/components')
},
...config.resolve
};
return config;
}
//...
}

module.exports = phase => nextConfig(phase);

.babelrc

babel-plugin-module-resolver 패키지를 설치하고 .babelrc 파일을 수정해줍니다.

1
npm i babel-plugin-module-resolver
.babelrc
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
"presets": [
"next/babel"
],
"plugins": [
//...
[
"module-resolver",
{
"root": [
"./src"
],
"alias": {
"@services": "./src/services",
"@utils": "./src/utils",
"@hooks": "./src/hooks",
"@components": "./src/components"
}
}
]
]
}

tsconfig

tsconfig 파일도 수정해 줍니다. 여기서 설정해주지 않으면 컴파일과정에서 에러가 발생합니다. 그리고 자동 입력 기능을 사용할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
{
"compilerOptions": {
<!-- ... -->
"paths": {
"@services/*": ["src/services/*"],
"@utils/*": ["src/utils/*"],
"@hooks/*": ["src/hooks/*"],
"@components/*": ["src/components/*"],
}
}
}

자동 입력

Share