在Next.js的Material-UI 5中添加自托管字体出现loader错误如何解决

解决方案 #

第一步：修正next.config.js配置 #

你当前的next.config.js写法不符合Next.js的配置规则，且不需要额外引入file-loader：Next.js 10及以上版本已经内置静态资源处理能力，原生支持woff、woff2、ttf等字体格式的导入，额外配置file-loader反而会引发冲突。
直接删除你next.config.js中所有module.rules相关配置即可，如果你没有其他自定义配置，next.config.js可以简化为：

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  // 保留其他你需要的Next.js原生配置项即可
}

module.exports = nextConfig

第二步：选择字体引用方案（二选一即可） #

方案A：public目录托管（无配置成本，推荐）

把你的BarcadeBrawl.ttf文件移动到项目根目录的public/fonts文件夹下（没有对应目录手动新建即可），不需要在主题文件中import字体，直接在@font-face中用绝对路径引用即可。

方案B：保留import导入方式

确认你的字体文件存放路径和import路径完全匹配，删除next.config.js中的错误loader配置后，Next.js会自动处理导入的字体文件，无需额外配置。

第三步：修正MUI主题中的@font-face配置 #

你当前的format字段写法错误，ttf格式对应的标准format值为truetype，修正后的主题配置如下：

import { createTheme } from "@mui/material";
import { purple, blue } from '@mui/material/colors';
// 如果你选用方案A，请删除下面这行import语句
import BarcadeBrawl from '../assets/fonts/BarcadeBrawl.ttf'

export const theme = createTheme({
    palette: {
        primary: {
            main: purple[500],
        },
        secondary: {
            main: blue[500],
        },
    },
    typography: {
        fontFamily: 'BarcadeBrawl, sans-serif', // 建议加fallback字体，避免字体加载失败时样式异常
        fontSize: 12,
    },
    components: {
        MuiCssBaseline: {
          styleOverrides: `
            @font-face {
              font-family: 'BarcadeBrawl';
              font-style: normal;
              font-display: swap;
              font-weight: 400;
              /* 如果你选用方案A，把下面的${BarcadeBrawl}替换为'/fonts/BarcadeBrawl.ttf'即可 */
              src: local('BarcadeBrawl'), url(${BarcadeBrawl}) format('truetype');
              unicodeRange: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF;
            }
          `,
        },
      },
});

第四步：验证生效 #

修改完成后重启开发服务器，清除浏览器缓存后loader报错会消失，字体可正常加载生效。

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