frontendreact

Nextjs typescript 절대경로 설정하기

next, react, typescript
Views: 342

시작하기

상대경로를 사용할 시 패키지 구조가 깊어질 경우 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