Turbo Monorepo中Next.js项目共享字体报404的解决方法咨询

问题根源 #

Next.js 默认仅将自身项目根目录下的 public 文件夹视为静态资源目录，packages 目录下的自定义 public 文件夹不会被自动识别，导致组件库引用时出现 404 错误。

方案一：构建脚本同步字体到各项目 public 目录 #

这种方式直接利用 Next.js 原生的静态资源机制，适配性最强：

1. 调整目录结构：在 packages 下新建 shared-assets 包（替代原 packages/public），内部创建 fonts 文件夹存放 .woff 字体文件。
2. 添加同步脚本：在 shared-assets/package.json 中添加复制脚本（需先安装依赖：npm install copyfiles -D）：

   "scripts": {
     "copy-fonts": "copyfiles -u 2 packages/shared-assets/fonts/* apps/*/public/fonts/"
   }
   

3. 配置 Turbo 流水线：在项目根目录的 turbo.json 中，让各 Next.js 项目的构建任务依赖同步脚本：

   {
     "$schema": "https://turbo.build/schema.json",
     "pipeline": {
       "copy-fonts": {
         "outputs": []
       },
       "build": {
         "dependsOn": ["^copy-fonts"],
         "outputs": ["dist/**", ".next/**"]
       }
     }
   }
   

4. 组件库引用字体：直接使用相对项目 public 目录的路径：

   @font-face {
     font-family: 'CustomFont';
     src: url('/fonts/your-font.woff') format('woff');
     font-weight: normal;
   }
   

方案二：Next.js 重写规则映射共享字体路径 #

通过配置 Next.js 的重写规则，让项目直接识别共享目录的字体资源：

1. 整理共享字体目录：将字体统一放在 packages/shared-assets/fonts 下。
2. 修改各项目的 next.config.js：添加重写规则，将 /fonts/* 请求映射到共享目录：

   /** @type {import('next').NextConfig} */
   const nextConfig = {
     async rewrites() {
       return [
         {
           source: '/fonts/:path*',
           destination: '../../packages/shared-assets/fonts/:path*',
         },
       ];
     },
   };
   
   module.exports = nextConfig;
   

3. 组件库引用方式：和方案一一致，使用 /fonts/your-font.woff 路径即可。

方案三：将字体作为模块导入（Next.js 12+ 支持） #

利用 Next.js 的资源导入能力，把字体当作模块导入使用：

1. 在共享包导出字体：在 packages/shared-assets/src/fonts 下存放字体，创建 index.js 导出资源：

   export const CustomFontRegular = require('./regular.woff');
   export const CustomFontBold = require('./bold.woff');
   

2. 组件库中导入并使用：安装 shared-assets 包后，在样式文件中通过导入的变量引用字体：

   @font-face {
     font-family: 'CustomFont';
     src: url(${CustomFontRegular}) format('woff');
     font-weight: normal;
   }
   

3. 优势：无需手动同步目录，Next.js 会自动将字体打包到静态资源目录，避免路径问题。

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