在 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

更新了官方答案：

这里的一般经验法则是避免在目录名和文件名中使用空格和大写字符。 所以而不是 ./fonts/Woff/Font Something.woff => ./fonts/woff/font-something.woff

作者致谢：

https://github.com/orgs/vercel/discussions/2367