Next.js 本地字体部署问题概述
next.js 提供了强大的 next/font 模块，用于优化字体加载和性能。其中 next/font/local 允许开发者在应用程序中集成自定义的本地字体。在本地开发环境中，这类配置通常工作正常。然而，许多开发者在将 next.js 应用部署到 vercel 等生产环境时，会遇到“module not found”的构建错误，即使字体文件和路径在本地验证无误。
典型的错误信息如下：
Module not found: Can't resolve './fonts/BrFirma-Thin.woff2'
这表明 Vercel 的构建系统无法找到或解析 next/font/local 配置中指定的字体文件路径。
根本原因分析
此问题的根本原因在于不同操作系统对文件系统路径的敏感性差异。本地开发环境（尤其是 macOS 和 Windows）通常默认文件系统是不区分大小写的，这意味着 Fonts/MyFont.woff 和 fonts/myfont.woff 可能被视为同一个文件。然而，Vercel 的构建环境基于 Linux 系统，其文件系统是严格区分大小写的。
当字体文件或其所在的目录名称中包含大写字母或空格时，即使本地开发环境能够成功解析，Linux 环境下也可能因路径不匹配而导致“Module not found”错误。例如，./fonts/BrFirma-Regular.woff2 在区分大小写的系统中，如果实际文件名为 brfirma-regular.woff2 或目录名为 Fonts，就会出现解析失败。
解决方案：路径命名规范化
解决此问题的关键是遵循一套严格的文件和目录命名规范，确保在任何操作系统环境下都能保持路径解析的一致性。
核心原则：
避免在字体文件及其所在目录的名称中使用空格和大写字母。建议采用以下规范：
- 全部小写： 所有文件和目录名均使用小写字母。
- 使用连字符： 使用连字符 - 代替空格或驼峰命名法，以提高可读性。
实践步骤：
-
重命名字体文件和目录： 检查所有涉及的字体文件及其父级目录，确保它们符合上述命名规范。
- 错误示例： src/styles/fonts/BrFirma-Regular.woff2
- 正确示例： public/assets/fonts/br-firma-regular.woff2
- 错误示例： src/Styles/Fonts/My Font.woff
- 正确示例： src/styles/fonts/my-font.woff
更新 next/font/local 配置中的 path 属性： 根据重命名后的文件和目录，修改 font.js（或任何定义字体的文件）中的 src 数组内的 path 属性。
示例代码：
假设原始的 font.js 配置如下，且字体文件位于 src/styles/fonts/ 目录下：
// src/styles/font.js (原始配置)
import localFont from 'next/font/local';
export const BRFirma = localFont({
src: [
{
path: './fonts/BrFirma-Regular.woff2', // 包含大写字母
weight: '400',
},
{
path: './fonts/BrFirma-SemiBold.woff2', // 包含大写字母
weight: '600',
},
],
});为了解决部署问题，我们首先将字体文件移动到 public 目录下（这是 Next.js 推荐放置静态资源的路径），并重命名为全小写、连字符分隔的形式。
推荐的字体文件结构：
public/
└── assets/
└── fonts/
├── br-firma-regular.woff2
└── br-firma-semi-bold.woff2然后，更新 font.js 中的路径配置：
// src/styles/font.js (修正后的配置)
import localFont from 'next/font/local';
export const BRFirma = localFont({
src: [
{
// 路径相对于此文件，或者从项目根目录开始的绝对路径（对于public目录）
// 如果字体文件在 public/assets/fonts/，则路径应为相对路径
// 例如，如果 font.js 在 src/styles/，那么到 public/assets/fonts 的相对路径是 '../../public/assets/fonts/'
// 更好的做法是直接使用相对于项目根目录的路径，或者确保字体文件在与 font.js 相对的子目录中
// 鉴于 Next.js 的 public 目录特性，通常可以直接引用 /assets/fonts/...
// 但对于 localFont 的 src 属性，它会尝试解析为模块，所以相对路径很重要。
// 假设 font.js 在 src/styles/，字体在 public/assets/fonts/
path: '../../public/assets/fonts/br-firma-regular.woff2', // 修正为全小写且与实际文件匹配
weight: '400',
},
{
path: '../../public/assets/fonts/br-firma-semi-bold.woff2', // 修正为全小写且与实际文件匹配
weight: '600',
},
],
});注意： 上述 path 属性的相对路径 ../../public/assets/fonts/ 是基于 font.js 文件位于 src/styles/ 且字体文件位于 public/assets/fonts/ 的情景。请务必根据您的实际文件布局调整相对路径。localFont 的 src 属性会像模块一样被 Webpack 解析，因此相对路径至关重要。
注意事项
- 路径的相对性： localFont 配置中的 path 属性是相对于定义该字体的 JavaScript/TypeScript 文件（例如 font.js）的。即使字体文件在 public 目录下，localFont 也会尝试通过模块解析器来查找它，因此正确的相对路径是必须的。
- public 目录： 尽管 public 目录通常用于静态资源，可以直接通过 / 根路径访问，但在 localFont 的 src 配置中，仍然需要提供相对于其定义文件的路径，因为 localFont 的处理方式与直接访问静态资源不同。
- jsconfig.js 或 tsconfig.json： 项目的 baseUrl 和 paths 配置主要影响模块导入路径（如 import { BRFirma } from 'styles/font';），它们通常不直接影响 localFont src 数组中文件路径的解析。localFont 的 src 路径更类似于 Webpack 的文件加载器路径。
- 清除缓存： 在进行上述更改后，建议清除 Vercel 的构建缓存并重新部署，以确保所有旧的构建工件都被替换。
总结
在 Next.js 应用中，next/font/local 模块配合 Vercel 部署时遇到的“Module not found”错误，通常源于文件系统对路径大小写敏感性的差异。通过严格遵循文件和目录的命名规范（全部小写、使用连字符），并确保 localFont 配置中的路径与实际重命名后的文件相匹配，可以有效解决这一部署难题。这一实践不仅保证了生产环境的稳定性，也提升了代码和文件管理的规范性。
