Next.js 14.1.0无法导入next/font/local模块问题求助

1. 确认Next.js版本 #

执行命令检查当前项目的Next.js版本，确保为14.1.0：

npm list next

若版本不符，重新安装指定版本：

npm install next@14.1.0 --save

2. 修正字体路径 #

next/font/local的src.path是项目根目录相对路径，而非组件所在目录的相对路径。你的字体文件在public/fonts下，修正代码如下：

import localFont from "next/font/local";

const custom = localFont({
  src: [
    {
      path: 'public/fonts/custom_font.ttf',
      weight: '400'
    }
  ],
  variable: '--font-custom'
})

3. 清理深层缓存并重建 #

除常规清理外，额外清理npm缓存后重新构建：

npm cache clean --force
rm -rf node_modules .next package-lock.json
npm install
npm run build
npm run dev

4. 检查Webpack配置（可选） #

若以上步骤无效，在next.config.js中添加字体文件处理规则：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    config.module.rules.push({
      test: /\.(ttf|otf|woff|woff2)$/i,
      type: 'asset/resource',
      generator: {
        filename: 'fonts/[name].[hash][ext]'
      }
    });
    return config;
  },
};

module.exports = nextConfig;

5. TypeScript项目额外检查 #

若使用TypeScript，确保类型声明正确，可添加类型约束：

import type { LocalFontOptions } from 'next/font/local';
import localFont from "next/font/local";

const custom = localFont({
  src: [{ path: 'public/fonts/custom_font.ttf', weight: '400' }],
  variable: '--font-custom'
} satisfies LocalFontOptions);

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