Next.js入门遇@next/font/google编译错误求助

问题描述 #

使用npx create-next-app@latest --experimental-app创建项目后，未修改任何代码，运行npm run dev时出现谷歌字体相关模块编译错误，报错信息如下：

error - node_modules/@next/font/google/index.js (15:6) @ eval
error - Error: @next/font/google failed to run or is incorrectly configured.
If you just installed @next/font, please try restarting next dev and resaving your file.

已尝试更新Next.js相关依赖，怀疑问题与Linux发行版有关。项目package.json关键依赖内容如下：

"version": "0.1.0",
"lockfileVersion": 2,
"requires": true,
"packages": {
  "": {
    "name": "incompilable",
    "version": "0.1.0",
    "dependencies": {
      "@next/font": "13.1.6",
      "@types/node": "18.11.18",
      "@types/react": "18.0.27",
      "@types/react-dom": "18.0.10",
      "eslint": "8.33.0",
      "eslint-config-next": "13.1.6",
      "next": "13.1.6",
      "nvm": "^0.0.4",
      "react": "18.2.0",
      "react-dom": "18.2.0",
      "typescript": "4.9.4",
      "webpack": "^5.75.0"
    },
    "devDependencies": {
      "standard": "^17.0.0"
    }
  }
}

解决办法 #

1. 清理依赖缓存并重新安装 #

执行以下命令彻底重置依赖：

rm -rf node_modules package-lock.json
npm cache clean --force
npm install

完成后重新启动npm run dev，多数依赖缓存或版本冲突问题可通过此方法解决。

2. 移除不必要的依赖 #

你的项目依赖中包含两个不需要的包，会干扰Next.js正常运行：

• nvm是Node版本管理工具，无需作为项目依赖安装
• Next.js内置webpack，手动安装会导致版本冲突
  执行命令移除：

npm uninstall nvm webpack

3. 检查网络连接 #

@next/font/google需要联网拉取字体文件，Linux下若存在代理、防火墙限制，会导致字体下载失败。可临时关闭防火墙，或确认网络能正常访问Google Fonts服务。

4. 调整Next.js版本 #

当前使用的13.1.6版本存在已知字体模块bug，可尝试升级到最新稳定版：

npm install next@latest @next/font@latest eslint-config-next@latest

或降级到13.1.5版本测试：

npm install next@13.1.5 @next/font@13.1.5 eslint-config-next@13.1.5

5. 临时替换字体导入方式 #

若以上方法无效，可暂时绕过@next/font模块，改用传统CSS字体导入：

1. 打开app/layout.tsx，删除原有的@next/font/google相关代码
2. 在app/globals.css中添加：

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');

body {
  font-family: 'Inter', sans-serif;
}

3. 重启npm run dev即可加载默认页面

内容的提问来源于stack exchange，提问作者Jesus Eduardo Ponce Diaz