在 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：
-- -------------------- ---- -------
-------------- - -
-------- -------- - -------- -- -- -
-- -- ----------
--------------------------
----- -------------------------------
------- -------------
-------- -
------ ----- -- -- --- -------- ------ --
--------- --------------
----------- ----------------------- -- ----
----------- -------- - -------------------------------------- - ------------------ -- -----
----- ----------------------
--
---
------ -------
--
--上述代码中，我们使用 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：
-- -------------------- ---- -------
-------------- - -
-------- -------- - -------- -- -- -
-- -- -----------
--------------------------
----- -------------------------------
------- --------------
-------- -
--------- ------
----------- ----------------------- -- ----
----------- -------- - -------------------------------------- - ------------------ -- -----
----- ----------------------
--
---
------ -------
--
--上述代码中，我们使用 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