NextJS 在导入路径中的哪里定义波浪号“~”符号？

Question

我使用 NextJS 在应用程序中阅读代码。它导入像这样的组件import Head from '~/components/layout/head'

项目结构：

-app
---components
---pages
---public

我想知道~nextJS 中的根目录在哪里定义。

我在哪里可以找到这个的配置？尝试在下一个包中找到 webpack 配置，但没有找到。

Answer 1

使用 Typescript 的paths功能，您可以指定模块映射。

// tsconfig.json

{
  "compilerOptions": {
    ...
    "baseUrl": "./",
    "paths": {
      "~/*": ["./src/*"]
    }
    ...
  }
}

这将允许您使用导入

// tsconfig.json

{
  "compilerOptions": {
    ...
    "baseUrl": "./",
    "paths": {
      "~/*": ["./src/*"]
    }
    ...
  }
}

将被映射到src/components/layout/head.

如果您使用的是 webpack，则需要使用tsconfig-paths-webpack-plugin.