在Next.js中为Material UI配置自托管字体遇阻

核心问题修正步骤 #

• 移除多余的字体导入：public目录下的资源无需通过import引入，直接使用绝对路径即可。你代码里的import HelveticaNeue from "./public/fonts/HelveticaNeue.woff2"会触发加载器报错，直接删除这一行。
• 补全主题代码语法：你的代码存在对象未闭合的语法错误，修正后完整代码如下：

import { createTheme } from '@mui/material/styles';

const theme = createTheme({
  typography: {
    fontFamily: 'HelveticaNeue, sans-serif', // 添加 fallback 字体提升兼容性
  },
  components: {
    MuiCssBaseline: {
      styleOverrides: `
        @font-face {
          font-family: 'HelveticaNeue';
          font-style: normal;
          font-display: swap;
          font-weight: normal;
          src: url(/fonts/HelveticaNeue.woff2) format('woff2');
          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;
        }
      `,
    },
  },
});

• 全局应用主题与样式基线：在pages/_app.js（Next.js 12及以下）或app/layout.js（Next.js 13+）中全局注入主题和CssBaseline，确保字体样式全局生效：

// pages/_app.js 示例
import { ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import theme from '../path/to/your/theme-file';

export default function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

• 加载器问题收尾：如果仍提示加载器错误，在next.config.js中添加字体资源规则（Next.js 13+ 无需此配置）：

module.exports = {
  webpack(config) {
    config.module.rules.push({
      test: /\.(woff|woff2|eot|ttf|otf)$/i,
      type: 'asset/resource',
    });
    return config;
  },
};

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