Next.js 15集成Figlet遇ENOENT错误，如何让框架自动复制字体文件？

用npx create-next-app@latest创建Next.js 15新项目，删除node_modules后执行pnpm install成功，运行pnpm run dev能正常显示默认首页。之后通过pnpm安装figlet并在首页文件中使用：

import figlet from "figlet";

export default function Home() {
    const homeFigletText = figlet.textSync(`Home!`);
}

此时页面报错：

Error: ENOENT: no such file or directory, open 'pathToProject\.next\server\fonts\Standard.flf'

src\app\page.tsx (6:25) @ Home

  4 |
  5 | export default function Home() {
> 6 |   const homeFigletText = figlet.textSync(`Home!`);

原因是Next.js通过静态分析追踪部署所需文件时，没能识别到figlet的字体文件。虽然figlet官方提供了importable-fonts的解决方案（可行且适用于客户端组件）：

// @ts-ignore
import standard from "figlet/importable-fonts/Standard";
figlet.parseFont("Standard", standard);

但之前无需该方法就能正常使用figlet，现在想知道有没有办法让Next.js自动将figlet字体复制到.next/server文件夹。

方法1：通过Webpack插件自动复制字体 #

安装copy-webpack-plugin作为开发依赖：

pnpm add copy-webpack-plugin --save-dev

修改项目根目录的next.config.js，添加Webpack配置：

const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    config.plugins.push(
      new CopyWebpackPlugin({
        patterns: [
          {
            from: path.resolve(__dirname, 'node_modules/figlet/fonts'),
            to: path.resolve(__dirname, '.next/server/fonts'),
          },
        ],
      })
    );
    return config;
  },
};

module.exports = nextConfig;

这样每次构建时，Webpack会自动把figlet的字体文件夹复制到.next/server对应的目录下，解决文件找不到的问题。

方法2：手动指定figlet的字体路径 #

在使用figlet前，直接设置字体文件的读取路径为node_modules中的字体目录：

import figlet from "figlet";
import path from "path";

export default function Home() {
  // 手动指定字体文件所在路径
  figlet.defaults({ fontPath: path.join(process.cwd(), 'node_modules/figlet/fonts') });
  const homeFigletText = figlet.textSync(`Home!`);
  // 后续页面逻辑
}

这种方法不需要额外安装插件，直接让figlet从正确的位置读取字体，绕开Next.js打包时的路径问题。

方法3：借助public目录托管字体 #

把node_modules/figlet/fonts下的字体文件复制到项目的public/fonts目录中，然后设置figlet的字体路径指向该目录：

import figlet from "figlet";
import path from "path";

export default function Home() {
  figlet.defaults({ fontPath: path.join(process.cwd(), 'public/fonts') });
  const homeFigletText = figlet.textSync(`Home!`);
  // 后续页面逻辑
}

这种方法需要手动复制字体文件，适合不想配置Webpack的场景。

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