Next.js 13国际化配置中添加本地字体报错问题排查

问题分析与解决方案 #

可能的原因及对应解决方法： #

1. 字体文件实际路径与代码路径不匹配

你代码中引用的是/fonts/tt-commons/下的系列字体，但从给出的文件夹结构看，public/fonts下只有font.woff2，不存在tt-commons子文件夹及对应的TTCommons字体文件。

• 解决：要么把TTCommons系列字体放到对应路径下，要么修正代码中的路径指向实际存在的字体文件。

2. 错误将字体放在public文件夹

localFont是Next.js用于本地字体模块打包的工具，它需要字体文件位于项目源码目录（如app文件夹内或项目根目录），而非public目录。public里的资源是作为静态资源通过URL访问的，无法被localFont作为模块解析加载。

• 解决：将字体文件夹移到源码目录中，比如调整结构为：

  rootFolder
  - app
    -- [lang]
      --- layout.js
    -- fonts
      --- tt-commons
        ---- TTCommons-DemiBold.woff2
        ---- TTCommons-Medium.woff2
        ---- ...其他字体文件
  

3. 路径解析方式错误

localFont的path参数不能以/开头（会被解析为相对于当前文件所在目录的绝对路径，导致找不到文件），需使用相对路径指向字体文件。

• 解决：根据字体的实际位置调整路径，比如字体放在app/fonts/tt-commons，那么从app/[lang]/layout.js出发，代码应修改为：

  const ttcommons = localFont({
    src: [
      {
        path: "../fonts/tt-commons/TTCommons-DemiBold.woff2",
        weight: '600',
        style: 'normal',
      },
      {
        path: '../fonts/tt-commons/TTCommons-Medium.woff2',
        weight: '500',
        style: 'normal',
      },
      {
        path: '../fonts/tt-commons/TTCommons-Regular.woff2',
        weight: 'normal',
        style: 'normal',
      },
      {
        path: '../fonts/tt-commons/TTCommons-Light.woff2',
        weight: '300',
        style: 'normal',
      },
    ],
  })
  

内容的提问来源于stack exchange，提问作者Kofi Talent