Next.js高级特性：导入和模块路径别名

从Next.js 9.4开始， Next.js自动支持tsconfig.jsonandjsconfig.json "paths"和"baseUrl"options 。

注意：jsconfig.json不使用TypeScript时可以使用

这些选项允许您配置模块别名，例如，常见模式是对某些目录使用别名以使用绝对路径。

这些选项的一个有用功能是将它们自动集成到某些编辑器中，例如vscode。

该baseUrl配置选项可以让你直接从项目的根目录导入。

此配置的示例：

// tsconfig.json or 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 or 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 />
    </>
  )
}