[next.js 공식문서] 28. Absolute Imports and Module Path Aliases

next.js 13버전 때 학습내용 정리 문서로 현재와 다름 주의

Absolute Imports and Module Path Aliases

절대경로 import

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": "."
  }
}

import Button from 'components/button';

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

별칭 import

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

import Button from '@/components/button';

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