introduction

• Absolute Imports

Next.js 自动的支持tsconfig.json以及 jsconfig.json中设置path以及 baseUrl(但是从 next.js 9.4开始) …

注意: jsconfig.json能够使用在非Typescript 环境 ..

注意你需要重启dev 服务器去反应tsconfig.json或者 jsconfig.json修改 ..

这些选择允许你配置模块别名,例如一个常见的模式是别名某些目录去使用绝对路径 …

这些选择的一个有用的特性是自动集成到某些编辑器(例如vscode) …

baseUrl配置选项允许你直接从项目的根进行导入 ….

例如:

// tsconfig.json or jsconfig.json
{
  "compilerOptions": {
    "baseUrl": "."
  }
}

然后假设你有一个组件

// components/button.js
export default function Button() {
  return <button>Click me</button>
}

然后在HomePage组件中你就可以导入

// pages/index.js
import Button from 'components/button'
export default function HomePage() {
  return (
    <>
      <h1>Hello World</h1>
      <Button />
    </>
  )
}

并且baseUrl是非常有用的(假设你想要增加其他别名(并不是一对一匹配的),那么可以使用path选项) ..

通过这个选项允许你配置模块别名,举个例子:

@/components/*到 components/*

示例:

// tsconfig.json or jsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/components/*": ["components/*"]
    }
  }
}

这个时候假设我们有一个组件Button,然后我们通过约定进行导入 ..

// pages/index.js
import Button from '@/components/button'
export default function HomePage() {
  return (
    <>
      <h1>Hello World</h1>
      <Button />
    </>
  )
}