コンテンツへスキップ
アプリケーションの構築設定絶対インポートとモジュールパスエイリアス

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

例

Next.js は、`tsconfig.json` と `jsconfig.json` ファイルの `"paths"` と `"baseUrl"` オプションを組み込みでサポートしています。

これらのオプションを使用すると、プロジェクトディレクトリを絶対パスにエイリアスすることができ、モジュールのインポートが容易になります。例えば

// before
import { Button } from '../../../components/button'
 
// after
import { Button } from '@/components/button'

**知っておくと良いこと**: `create-next-app` は、これらのオプションの設定を促します。

絶対インポート

`baseUrl` 設定オプションを使用すると、プロジェクトのルートから直接インポートできます。

この設定の例

tsconfig.json または jsconfig.json
{
  "compilerOptions": {
    "baseUrl": "."
  }
}
components/button.tsx
export default function Button() {
  return <button>Click me</button>
}
app/page.tsx
import Button from 'components/button'
 
export default function HomePage() {
  return (
    <>
      <h1>Hello World</h1>
      <Button />
    </>
  )
}

モジュールエイリアス

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

例えば、次の設定では `@/components/*` を `components/*` にマップします。

tsconfig.json または jsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/components/*": ["components/*"]
    }
  }
}
components/button.tsx
export default function Button() {
  return <button>Click me</button>
}
app/page.tsx
import Button from '@/components/button'
 
export default function HomePage() {
  return (
    <>
      <h1>Hello World</h1>
      <Button />
    </>
  )
}

各 `"paths"` は `baseUrl` の場所を基準とした相対パスです。例えば

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