Absolute Imports and Module Path Aliases
Examples
Next.js は、tsconfig.jsonおよびjsconfig.jsonファイルの"paths"および"baseUrl"の options を組み込みでサポートしています。"
これらの options を使用すると、プロジェクトのディレクトリを絶対 paths にエイリアス設定でき、import modules を容易にします。例えば:
// before
import { Button } from "../../../components/button";
// after
import { Button } from "@/components/button";
Good to know:
create-next-appは、これらの options を設定するように prompt します。
Absolute Imports
baseUrl設定オプションは、プロジェクトの root から直接 import することを可能にします。
この設定の一例：
tsconfig.json
{
"compilerOptions": {
"baseUrl": "."
}
}
components/button.tsx
export default function Button() {
return <button>Click me</button>
}
components/button.js
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 />
</>
)
}
app/page.js
import Button from 'components/button'
export default function HomePage() {
return (
<>
<h1>Hello World</h1>
<Button />
</>
)
}
Module Aliases
baseUrl path の設定に加えて、"paths"オプションを使用してモジュールの paths を「エイリアス」にすることができます。
たとえば、以下の設定では、@/components/* を components/*にマッピングします：
tsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/components/*": ["components/*"]
}
}
}
components/button.tsx
export default function Button() {
return <button>Click me</button>
}
components/button.js
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 />
</>
)
}
app/page.js
import Button from '@/components/button'
export default function HomePage() {
return (
<>
<h1>Hello World</h1>
<Button />
</>
)
}
""paths""のそれぞれは、baseUrlの位置に対して相対的になっています。例えば：
// tsconfig.json or 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>
);
}