如何配置NextJS的next.config.js以正确导入本地TTF字体？

问题原因 #

Next.js 默认未配置处理 .ttf 等字体文件的加载器，直接在组件中导入字体文件时，会触发「缺少对应loader」的错误。

解决方法一：配置webpack加载器 #

修改项目根目录下的 next.config.js，添加字体文件的webpack处理规则：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    // 新增字体文件处理规则
    config.module.rules.push({
      test: /\.(ttf|otf|eot|woff|woff2)$/,
      use: {
        loader: 'file-loader',
        options: {
          name: '[name].[ext]',
          outputPath: 'fonts/', // 字体打包后输出到public/fonts目录
          publicPath: '/fonts/'
        }
      }
    });
    return config;
  }
};

module.exports = nextConfig;

注意事项

• 若未安装 file-loader，先执行安装命令：

  npm install file-loader --save-dev
  # 或使用yarn
  yarn add file-loader --dev
  

• 导入字体后，可在组件中直接引用：

  import PrometoRegular from '../../../assets/fonts/Prometo-Regular.ttf';
  
  const Header = () => {
    return (
      <h1 style={{ 
        fontFamily: 'PrometoRegular', 
        src: `url(${PrometoRegular}) format('truetype')` 
      }}>
        示例标题
      </h1>
    );
  };
  
  export default Header;
  

解决方法二：使用Next.js官方字体加载方案（推荐） #

Next.js 13+ 提供了 next/font 模块，更高效且无需手动配置webpack，步骤如下：

1. 在项目中创建字体配置文件（如 app/fonts.ts）：

import localFont from 'next/font/local';

// 加载本地字体
const prometoRegular = localFont({
  src: '../assets/fonts/Prometo-Regular.ttf',
  display: 'swap', // 优化字体加载体验
  variable: '--font-prometo-regular', // 定义CSS变量，方便全局使用
});

export { prometoRegular };

2. 在组件中直接使用：

import { prometoRegular } from './fonts';

const Header = () => {
  return (
    <h1 className={prometoRegular.className}>示例标题</h1>
  );
};

export default Header;

3. 若要全局使用，可在 globals.css 中引用CSS变量：

h1 {
  font-family: var(--font-prometo-regular);
}

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