절대 가져오기와 모듈 경로 별칭

넥스트는 넥스트 9.4부터 tsconfig.json, jsconfig.json, "paths", "baseUrl" 옵션을 자동으로 지원합니다.

참고

jsconfig.json는 타입스크립트를 사용하지 않을 때 사용할 수 있습니다.

참고

tsconfig.json나 jsconfig.json의 수정 사항을 반영하려면 개발 서버를 다시 시작해야 합니다.

이 옵션을 사용하면 모듈 별칭을 설정할 수 있습니다. 일반적인 패턴은 절대 경로를 사용하도록 특정 디렉터리에 별칭을 지정하는 것입니다.

이 옵션의 유용한 기능 중 하나는 vscode와 같은 특정 편집기에 자동으로 통합된다는 것입니다.

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

예시:

tsconfig.json 또는 jsconfig.json
json
{
  "compilerOptions": {
    "baseUrl": "."
  }
}

tsconfig.json 또는 jsconfig.json
json
{
  "compilerOptions": {
    "baseUrl": "."
  }
}

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

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

pages/index.js
jsx
import Button from 'components/button';
export default function HomePage() {
  return (
    <>
      <h1>Hello World</h1>
      <Button />
    </>
  );
}

pages/index.js
jsx
import Button from 'components/button';
export default function HomePage() {
  return (
    <>
      <h1>Hello World</h1>
      <Button />
    </>
  );
}

1:1로 일치하지 않는 다른 별칭을 추가하는 것도 가능합니다. 타입스크립트에 이를 위한 "paths" 옵션이 있습니다.

"paths"를 사용하면 모듈 별칭을 설정할 수 있습니다. 예를 들어 @/components/*는 components/*을 가리킵니다.

예시:

tsconfig.json 또는 jsconfig.json
json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/components/*": ["components/*"]
    }
  }
}

tsconfig.json 또는 jsconfig.json
json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/components/*": ["components/*"]
    }
  }
}

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

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

pages/index.js
jsx
import Button from '@/components/button';
export default function HomePage() {
  return (
    <>
      <h1>Hello World</h1>
      <Button />
    </>
  );
}

pages/index.js
jsx
import Button from '@/components/button';
export default function HomePage() {
  return (
    <>
      <h1>Hello World</h1>
      <Button />
    </>
  );
}