解决 Next.js 中引入本地字体报 404 错误的问题-JavaScript中文网-JavaScript教程资源分享门户

在 Next.js 中，我们经常需要引入本地字体来美化网页的样式，但是有时候会遇到引入本地字体时出现 404 错误的情况。这篇文章将带你解决这个问题。

问题原因

在 Next.js 中，我们可以在 public 目录下创建一个 fonts 文件夹，然后在 CSS 文件中使用 @font-face 引入本地字体文件。但是，有时候我们可能会遇到 404 错误，即字体文件无法被正确加载。

这是因为 Next.js 会将所有 public 目录下的文件都打包到根目录下的 _next/static 文件夹中，并且在打包时会根据文件名生成哈希值作为文件名。因此，如果我们在 CSS 文件中直接引用 public/fonts/xxx.ttf 这样的路径，最终生成的文件名可能是 public/fonts/xxx.ttf?hash=abc123，而实际上 _next/static/public/fonts/xxx.ttf?hash=abc123 这个文件并不存在，就会出现 404 错误。

解决方法

为了解决这个问题，我们需要使用 url-loader 或 file-loader 来加载本地字体文件，并且需要手动指定输出路径和文件名。

使用 url-loader

首先，我们需要安装 url-loader：

npm install url-loader --save-dev

然后在 next.config.js 中配置 url-loader：

// javascriptcn.com 代码示例
module.exports = {
  webpack: (config, { isServer }) => {
    // 配置 url-loader
    config.module.rules.push({
      test: /\.(woff|woff2|eot|ttf|otf)$/i,
      loader: 'url-loader',
      options: {
        limit: 8192, // 小于 8KB 的字体文件转换成 base64 编码
        fallback: 'file-loader',
        publicPath: '/_next/static/fonts/', // 输出路径
        outputPath: isServer ? `${process.cwd()}/.next/static/fonts/` : './static/fonts/', // 输出文件名
        name: '[name]-[hash].[ext]',
      },
    });

    return config;
  },
};

上述代码中，我们使用 url-loader 来处理字体文件，并将小于 8KB 的字体文件转换成 base64 编码。如果文件大小超过了 8KB，就使用 file-loader 来处理。同时，我们手动指定了输出路径和文件名，并使用哈希值作为文件名的一部分，以避免缓存问题。

最后，在 CSS 文件中使用 url() 函数来引入字体文件：

@font-face {
  font-family: 'MyFont';
  src: url('/_next/static/fonts/MyFont-abc123.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

使用 file-loader

如果你不想将小于 8KB 的字体文件转换成 base64 编码，可以使用 file-loader 来处理字体文件。首先，我们需要安装 file-loader：

npm install file-loader --save-dev

然后在 next.config.js 中配置 file-loader：

// javascriptcn.com 代码示例
module.exports = {
  webpack: (config, { isServer }) => {
    // 配置 file-loader
    config.module.rules.push({
      test: /\.(woff|woff2|eot|ttf|otf)$/i,
      loader: 'file-loader',
      options: {
        esModule: false,
        publicPath: '/_next/static/fonts/', // 输出路径
        outputPath: isServer ? `${process.cwd()}/.next/static/fonts/` : './static/fonts/', // 输出文件名
        name: '[name]-[hash].[ext]',
      },
    });

    return config;
  },
};

上述代码中，我们使用 file-loader 来处理字体文件，并手动指定了输出路径和文件名，并使用哈希值作为文件名的一部分。

最后，在 CSS 文件中使用相对路径来引入字体文件：

@font-face {
  font-family: 'MyFont';
  src: url('../../static/fonts/MyFont-abc123.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

总结

在 Next.js 中引入本地字体时，我们需要使用 url-loader 或 file-loader 来处理字体文件，并手动指定输出路径和文件名。这篇文章中，我们介绍了如何使用这两个工具来解决引入本地字体报 404 错误的问题，并提供了示例代码。希望这篇文章能帮助你解决类似的问题。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/657c0395d2f5e1655d6bd82c