절대경로 참조와 모듈 경로 별칭.md

절대경로 참조와 모듈 경로 별칭

• Next.js는 jsconfig.json 또는 tsconfig.json 에서 path, baseUrl이 기본적으로 제공됨
• 위 옵션을 사용하면 프로젝트의 폴더들은 절대경로로 지정해서 모듈을 더 쉽게 가져올 수 있음

// before
import { Button } from "../../../components/button";

// after
import { Button } from "@/components/button";

절대경로 참조

• baseUrl 옵션을 사용하면 프로젝트의 루트에서 직접 모듈을 가져올 수 있음

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

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

import Button from "components/button";

export default function HomePage() {
  return (
    <>
      <h1>Hello World</h1>
      <Button />
    </>
  );
}

모듈 별칭

• baseUrl 을 구성하는거 외에도 paths 옵션을 사용해서 모듈 경로릅 별칭으로 지정이 가능함

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

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

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/*"]
    }
  }
}

// pages/index.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>
  );
}