绝对导入和模块路径别名

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

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

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

备注

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

绝对导入

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

这是该配置的一个示例：

tsconfig.json或jsconfig.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>
  )
}