メインコンテンツまでスキップ

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

例

Next.jsは tsconfig.json と jsconfig.json のオプション "paths"と "baseUrl"をサポートしています。

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

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

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

Good to know: 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/*"]
    }
  }
}
// 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>
  )
}