Next.js では Next.js 9.4 以降のオプションで、 tsconfig.json
や jsconfig.json
の "paths"
と "baseUrl"
に自動的に対応します。
注意:TypeScriptを使っている場合は
jsconfig.json
を利用できません
注意:
tsconfig.json
/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 />
</>
);
}