在 vercel 中部署时，本地字体无法在 next.js 中解析

Question

我正在尝试使用next/fonts在next.js 13.3. 本地一切正常，但当我部署到 Vercel 时，我不断收到此构建错误Module not found: Can't resolve './fonts/BrFirma-Thin.woff2'

这就是我的文件夹结构的样子

• 源代码
  • _app.js
  • 风格
    • 字体.js
    • 字体

_app.js

import { BRFirma } from 'styles/font';
...
 <main className={BRFirma.className}>
  ...
 </main>

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',
        },
    ],
}); 

我再次将字体移至公共文件夹，只是为了确保我做得正确。

font.js

import localFont from 'next/font/local';

export const BRFirma = localFont({
    src: [
       
        {
            path: '../../public/assets/fonts/BrFirma-Regular.woff2',
            weight: '400',
        },
        {
            path: '../../public/assets/fonts/BrFirma-SemiBold.woff2',
            weight: '600',
        },
    ],
});

再次，本地一切正常，但部署仍然失败并显示module not found消息。

仅供记录，这就是jsconfig.js文件的样子。

{
    "compilerOptions": {
        "baseUrl": "src",
        "paths": {
            "@/*": ["./src/*"]
        }
    },
    "exclude": ["node_modules", "build", "dist", "jest"]
}

Answer 1

今天遇到了同样的问题，不太确定为什么 vercel 不喜欢某些字体，但尝试从其他地方下载字体文件。您使用的路径不是问题。https://github.com/orgs/vercel/discussions/2367