[Next.js 13] import alias @ 설정/추가/수정/삭제 방법

# Next.js 13 - import alias 란?

import alias 란 import 할 때마다 매번 복잡한 경로를 입력할 필요 없이, 공통되는 부분은 @로 치환하여 사용하는 방법을 의미한다.

import Header from "@/components/common/Header";

export default function BoardPage() {
  return (
    <div>
      <Header />
      <h1>BoardPage</h1>
    </div>
  );
}

 

만약 import alias 없다면, 매번 import 할때마다 "../../components/common/.." 등의 복잡한 경로를 작성해주어야 한다.

 

import Header from "../../components/common/Header";

export default function BoardPage() {
  return (
    <div>
      <Header />
      <h1>BoardPage</h1>
    </div>
  );
}

 

 

# import alias @ 설정 방법

Next.js 설치 시, 자동으로 기본 import alias가 세팅된다.

`npx create-next-app` 으로 Next.js 프로젝트 세팅 시 아래 질문을 받게 되는데,

 

Would you like to customize the default import alias? "No" / Yes

 

No를 선택하면,

Next.js가 아래와 같이 tsconfig.json 파일에 기본 import alias 세팅을 진행한다.

1. `/src` 디렉토리를 사용하기로 설정한 경우

- import 할 때, `@`를 사용하면 `src/` 경로부터 시작하도록 설정된다.

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

 

2. `/src` 디렉토리를 사용하지 않기로 설정한 경우

- import 할 때, `@`를 사용하면 `/` 루트 경로부터 시작하도록 설정된다.

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./*"]
    }
  }
}

 

 

# import alias @custom 수정/추가/삭제 방법

- 기본 세팅된 import 경로를 수정/추가/삭제하려면, paths 속성에 추가 설정해주면 된다.

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"],
      "@components/*": ["./src/components/*"], // Components directory
      "@hooks/*": ["./src/hooks/*"] // Hooks directory
    }
  }
}

 

위와 같이 설정하면 import 할 때,

- @components는 `src/components` 경로부터 시작 되고, 

- @hooks는 `src/hooks` 경로부터  시작 된다.

 

프로젝트 구조에 따라 적절히 수정/추가/삭제하여 사용해주면 도움이 된다.