[Next.js] import paths

찐새·2022년 5월 19일
0

next.js

목록 보기
8/41
post-thumbnail
post-custom-banner

import paths

A폴더 안의 B폴더 안의 C파일의 D함수를 import했다면 경로가 아래처럼 나올 것이다.

import D from "../B/C";

next.js에서 간단한 코드 추가로 ../에 대한 경로명을 수정하여 적용할 수 있다.

(1) tsconfig.json 수정

tsconfig.json 파일에 다음과 같은 코드를 추가한다.

{
  "compilerOptions": {
	// ...rest
    "baseUrl": ".",
    "paths": {
      "@B/*": ["B/*"],
    }
  },
}

baseUrl은 가장 밑바탕이 되는 경로로, . 입력 시 tsconfig.json이 있는 디렉토리를 가리킨다.
paths에는 import하는 경로를 추가한다. 상기 예시의 경우, B폴더를 호출할 때 ../B/...이 아닌 @B/...으로 표기한다.


참고
노마드 코더 - 캐럿마켓 클론코딩
타입스크립트 - tsconfig#baseUrl

profile
프론트엔드 개발자가 되고 싶다
post-custom-banner

0개의 댓글