Absolute Imports と Module Path Aliases

例

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

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 の設定オプションを使用することで、プロジェクトのrootから直接インポートすることが可能になります。

この設定の例：

tsconfig.json または jsconfig.json

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

TypeScript

components/button.tsx

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

JavaScript

components/button.js

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

TypeScript

app/page.tsx

import Button from 'components/button'

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

JavaScript

app/page.js

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

TypeScript

components/button.tsx

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

JavaScript

components/button.js

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

TypeScript

app/page.tsx

import Button from '@/components/button'

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

JavaScript

app/page.js

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

TypeScript

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>
  )
}

JavaScript

app/page.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>
  )
}