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

35g0bw71  于 2023-06-22  发布在  其他
关注(0)|答案(1)|浏览(155)

我正在尝试在next.js 13.3中使用next/fonts。在本地一切正常,但当我部署到Vercel时,我不断收到此构建错误Module not found: Can't resolve './fonts/BrFirma-Thin.woff2'
这就是我的文件夹结构

  • SRC
  • _app.js
  • 样式
  • font.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"]
}
33qvvth1

33qvvth11#

今天遇到了同样的问题,不知道为什么vercel不喜欢一些字体,但尝试从其他地方下载字体文件。你使用的路径不是问题所在https://github.com/orgs/vercel/discussions/2367

相关问题