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

Next.js では tsconfig.jsonjsconfig.json"paths""baseUrl" オプションに自動的に対応します。

注意:TypeScriptを使っている場合は jsconfig.json を利用できません

これらのオプションによって、モジュール読み込みパスのエイリアスを設定できます。よくあるパターンとしては、特定のディレクトリパスへエイリアスを設定し、そこに存在するモジュールを相対パスではなく絶対パスでインポートするような使い方です。

これらのオプションを設定すると、vscode など特定のエディタは自動的に読み取り、補完を受けられるなど使い勝手が良くなります。

baseUrlオプションを設定すると、プロジェクトのルートディレクトリからのパスで直接インポート可能になります。

この場合のサンプルコードは以下の通りです:

// tsconfig.json または jsconfig.json
{
  "compilerOptions": {
    "baseUrl": "."
  }
}
// components/button.js
export default function Button() {
  return <button>Click me</button>;
}
// pages/index.js
import Button from 'components/button';

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

baseUrlだけでも便利ですが、1 対 1 の対応ではなく複数のモジュールに一致するエイリアスを追加したいこともあるでしょう。このような場合のために、TypeScript では "paths" オプションがあります。

"paths"オプションを設定すると、複数ファイルへ対応するモジュールパスエイリアスを設定できます。たとえば、@/components/*components/* と解釈するようマッピングできます。

この場合のサンプルコードは以下の通りです:

// tsconfig.json または jsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/components/*": ["components/*"]
    }
  }
}
// components/button.js
export default function Button() {
  return <button>Click me</button>;
}
// pages/index.js
import Button from '@/components/button';

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