Menu

絶対インポートとモジュールパスエイリアス

例

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
TypeScript
export default function Button() {
  return <button>クリック</button>
}
app/page.tsx
TypeScript
import Button from 'components/button'
 
export default function HomePage() {
  return (
    <>
      <h1>Hello World</h1>
      <Button />
    </>
  )
}

モジュールエイリアス

baseUrlパスの設定に加えて、"paths"オプションを使用してモジュールパスに「エイリアス」を付けることができます。

例えば、次の設定は@/components/*をcomponents/*にマッピングします：

tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/components/*": ["components/*"]
    }
  }
}
components/button.tsx
TypeScript
export default function Button() {
  return <button>クリック</button>
}
app/page.tsx
TypeScript
import Button from '@/components/button'
 
export default function HomePage() {
  return (
    <>
      <h1>Hello World</h1>
      <Button />
    </>
  )
}

各"paths"はbaseUrlの場所を基準にしています。例えば：

tsconfig.json
{
  "compilerOptions": {
    "baseUrl": "src/",
    "paths": {
      "@/styles/*": ["styles/*"],
      "@/components/*": ["components/*"]
    }
  }
}
app/page.tsx
TypeScript
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>
  )
}