Next.js 14部署至Vercel时出现模块未找到错误，如何解决？

针对你遇到的Type error: Cannot find module '@/app/ui/fonts' or its corresponding type declarations错误，以下是具体解决步骤：

1. 检查并安装必要依赖 #

如果你的@/app/ui/fonts文件中使用了Next.js官方的字体优化工具，需要确保安装@next/font包：

npm install @next/font

若使用Yarn或pnpm，对应命令为：

yarn add @next/font
# 或
pnpm add @next/font

2. 非依赖类问题排查 #

多数情况下，该错误并非缺少依赖导致，需重点排查以下几点：

• 确认文件已提交至仓库：检查本地项目中是否存在app/ui/fonts.ts（或.js）文件，且该文件已提交到GitHub仓库（Vercel仅拉取仓库内的文件，本地未提交的文件部署时会丢失）。
• 验证路径别名配置：检查tsconfig.json或jsconfig.json中的路径别名设置，确保@/指向项目根目录，示例配置：

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

• 检查TypeScript类型声明：如果是TypeScript项目，确保fonts.ts中导出的lusitana类型正确；若为自定义模块，可在项目根目录的types文件夹中添加类型声明文件（如fonts.d.ts）：

declare module '@/app/ui/fonts' {
  export const lusitana: import('@next/font').Font;
}

• 查看Vercel构建日志：进入Vercel项目的构建页面，检查依赖安装步骤是否有报错，或构建命令是否正确执行。

内容的提问来源于stack exchange，提问作者Lin Khant Htel