使用Next.js与Styled Components引入本地字体报错如何解决？

当前报错是因为Next.js默认没有配置处理.ttf字体文件的webpack加载规则，且你不需要通过import的方式引入public目录下的静态资源，有两种解决方案可选：

方案1：无需修改配置（推荐） #

public目录下的所有资源会默认对外暴露在根路径下，不需要import引入，直接修改你的全局样式代码即可：

• 删掉import regularFont from "../public/fonts/IRANYekanRegular.ttf"; 这行导入代码
• 修改@font-face的src路径，同时修正font-family多余的空格问题：

const GlobalStyle = createGlobalStyle<{ lang?: Languages_type | string }>`
@font-face {
  font-family: "ir";
  src: local("ir"), url(/fonts/IRANYekanRegular.ttf) format("truetype");
}     
 
body,
html {
  margin: 0;
  font-family: "ir";
}
`;

修改后重启项目即可正常生效。

方案2：配置webpack支持导入字体文件 #

如果你需要通过import的方式引入字体资源，在项目根目录的next.config.js文件中添加如下配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack(config) {
    // 添加字体文件处理规则
    config.module.rules.push({
      test: /\.(woff|woff2|eot|ttf|otf)$/i,
      type: 'asset/resource',
      generator: {
        // 打包后字体文件的输出路径
        filename: 'static/fonts/[hash][ext][query]'
      }
    })
    return config
  }
}

module.exports = nextConfig

配置完成后重启项目，原来的import引入方式就可以正常使用了。

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