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

例

絶対インポートとエイリアス

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

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

// 変更前
import { Button } from '../../../components/button'

// 変更後
import { Button } from '@/components/button'

補足: create-next-appはこれらのオプションを設定するよう促します。

絶対インポート

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

設定例：

tsconfig.json または jsconfig.json

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

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

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

import Button from 'components/button'

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

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/*"]
    }
  }
}

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

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

import Button from '@/components/button'

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

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/*"]
    }
  }
}

// pages/index.js
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>
  )
}

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

絶対インポート

モジュールエイリアス

On this page