Next.js无法识别@lib目录，需如何配置路径别名？

Next.js 默认不支持@lib这类自定义路径别名，需要手动添加配置来实现，具体步骤如下：

1. 添加/修改配置文件 #

根据你的项目类型（JS/TS），在项目根目录创建或修改对应的配置文件：

针对 JavaScript 项目 #

创建jsconfig.json文件，写入以下内容：

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

针对 TypeScript 项目 #

修改已有的tsconfig.json，在compilerOptions中添加baseUrl和paths配置（保留原有其他配置）：

{
  "compilerOptions": {
    // 其他已有配置...
    "baseUrl": "./src",
    "paths": {
      "@lib/*": ["lib/*"]
    }
  }
}

2. 重启开发服务器 #

配置修改后，必须重启你的 Next.js 开发服务器，新的路径别名规则才会生效。

3. （可选）ESLint 兼容配置 #

如果你的项目使用 ESLint，为了避免编辑器出现"无法解析模块"的警告，需要在.eslintrc.json中添加路径解析配置：

{
  // 其他配置...
  "settings": {
    "import/resolver": {
      "node": {
        "paths": ["src"]
      }
    }
  }
}

完成以上配置后，import { MEDUSA_BACKEND_URL, queryClient } from "@lib/config"就能正常解析到src/lib/config.js文件了。

内容的提问来源于stack exchange，提问作者FabricioG