跳到主要内容

绝对导入和模块路径别名

Next.js内置支持tsconfig.jsonjsconfig.json文件中的"paths""baseUrl"选项。

这些选项允许您将项目目录别名到绝对路径,从而更容易导入模块。例如:

// 之前
import { Button } from '../../../components/button'

// 之后
import { Button } from '@/components/button'
备注

create-next-app将提示您配置这些选项。

绝对导入

baseUrl配置选项允许您直接从项目的根目录进行导入。

这是该配置的一个示例:

tsconfig.jsonjsconfig.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"选项将模块路径"alias"。

例如,以下配置将@/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>
)
}