절대 경로 import 및 모듈 경로 별칭

예시

절대 경로 가져오기 및 별칭

Next.js는 tsconfig.json 및 jsconfig.json 파일의 "paths" 및 "baseUrl" 옵션에 대한 내장 지원을 제공합니다.

이러한 옵션을 사용하면 프로젝트 디렉토리를 절대 경로로 별칭을 지정할 수 있어 모듈을 더 쉽게 가져올 수 있습니다. 예를 들어:

// 이전
import { Button } from "../../../components/button";
 
// 이후
import { Button } from "@/components/button";

알아두면 좋은 점: create-next-app은 이러한 옵션을 구성하도록 안내합니다.

절대 경로 가져오기

baseUrl 구성 옵션을 사용하면 프로젝트의 루트에서 직접 가져올 수 있습니다.

이 구성의 예시:

tsconfig.json or jsconfig.json

{
  "compilerOptions": {
    "baseUrl": "."
  }
}

components/button.tsx

export default function Button() {
  return <button>Click me</button>;
}

components/button.js

export default function Button() {
  return <button>Click me</button>;
}

app/page.tsx

import Button from "components/button";
 
export default function HomePage() {
  return (
    <>
      <h1>Hello World</h1>
      <Button />
    </>
  );
}

app/page.js

import Button from "components/button";
 
export default function HomePage() {
  return (
    <>
      <h1>Hello World</h1>
      <Button />
    </>
  );
}

모듈 별칭

baseUrl 경로를 구성하는 것 외에도 "paths" 옵션을 사용하여 모듈 경로에 "별칭"을 지정할 수 있습니다.

예를 들어, 다음 구성은 @/components/*를 components/*에 매핑합니다:

tsconfig.json or jsconfig.json

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

components/button.tsx

export default function Button() {
  return <button>Click me</button>;
}

components/button.js

export default function Button() {
  return <button>Click me</button>;
}

app/page.tsx

import Button from "@/components/button";
 
export default function HomePage() {
  return (
    <>
      <h1>Hello World</h1>
      <Button />
    </>
  );
}

app/page.js

import Button from "@/components/button";
 
export default function HomePage() {
  return (
    <>
      <h1>Hello World</h1>
      <Button />
    </>
  );
}

각 "paths"는 baseUrl 위치를 기준으로 합니다. 예를 들어:

tsconfig.json or jsconfig.json

{
  "compilerOptions": {
    "baseUrl": "src/",
    "paths": {
      "@/styles/*": ["styles/*"],
      "@/components/*": ["components/*"]
    }
  }
}

app/page.tsx

import Button from "@/components/button";
import "@/styles/styles.css";
import Helper from "utils/helper";
 
export default function HomePage() {
  return (
    <Helper>
      <h1>Hello World</h1>
      <Button />
    </Helper>
  );
}

app/page.js

import Button from "@/components/button";
import "@/styles/styles.css";
import Helper from "utils/helper";
 
export default function HomePage() {
  return (
    <Helper>
      <h1>Hello World</h1>
      <Button />
    </Helper>
  );
}

환경 변수 MDX