절대 경로 임포트와 모듈 경로 별칭

Table of Contents

절대 경로
절대 경로 임포트
모듈 별칭

절대 경로

Next.js는 tsconfig.json 및 jsconfig.json 파일의 "paths" 및 "baseUrl" 옵션에 대한 내장 지원을 제공합니다. 이러한 옵션을 사용하면 프로젝트 디렉터리를 절대 경로에 별칭으로 지정할 수 있어 모듈을 임포트하기 쉽게 만듭니다.

// 변경 전
import { Button } from '../../../components/button'

// 변경 후
import { Button } from '@/components/button'

create-next-app은 이러한 옵션을 위해 구성하도록 요청할 것입니다.

절대 경로 임포트

baseUrl 구성 옵션을 사용하면 프로젝트의 루트에서 직접 임포트할 수 있습니다. 이 구성의 예는 다음과 같습니다.

tsconfig.json

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

components/button.tsx

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

JavaScript

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>안녕하세요, 세계</h1>
      <Button />
    </>
  )
}

JavaScript

app/page.js

import Button from 'components/button'

export default function HomePage() {
  return (
    <>
      <h1>안녕하세요, 세계</h1>
      <Button />
    </>
  )
}

모듈 별칭

baseUrl 경로를 구성하는 것 외에도 "paths" 옵션을 사용하여 모듈 경로에 "별칭"을 지정할 수 있습니다. 예를 들어 다음 구성은 @/components/*를 components/*에 매핑합니다.

tsconfig.json

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

components/button.tsx

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

JavaScript

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>안녕하세요, 세계</h1>
      <Button />
    </>
  )
}

JavaScript

app/page.js

import Button from '@/components/button'

export default function HomePage() {
  return (
    <>
      <h1>안녕하세요, 세계</h1>
      <Button />
    </>
  )
}

각각의 "paths"는 baseUrl 위치를 기준으로 상대 경로입니다.

// tsconfig.json 또는 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>안녕하세요, 세계</h1>
      <Button />
    </Helper>
  )
}