Next.js 14.2.0新创建应用访问本地时抛出ERR_UNSUPPORTED_ESM_URL_SCHEME错误

这个错误是Windows系统下，next/font处理字体文件路径时未正确转换为ESM支持的file://协议导致的——直接使用C:\开头的绝对路径会被识别为无效的c:协议，触发加载失败。以下是可行的修复方案：

• 修正字体导入路径为相对路径
  打开src/app/layout.js，找到next/font的代码块。若使用本地字体，将绝对路径替换为相对项目根目录的路径。
  错误示例：

  import localFont from 'next/font/local'
  const customFont = localFont({ src: 'C:/my-project/public/fonts/custom.ttf' })
  

  修正后（假设字体文件在public/fonts/下）：

  import localFont from 'next/font/local'
  const customFont = localFont({ src: '../public/fonts/custom.ttf' })
  

• 清除Next.js缓存并重启服务
  运行命令清除缓存：

  npx next clean
  

  之后重新启动开发服务器：

  npm run dev
  

• 检查Node.js版本
  确保使用的Node.js版本符合Next.js 14.2.0要求（推荐v18.17+或v20.6+），版本过低可能导致ESM路径处理异常。通过node -v查看版本，必要时升级Node.js。

• 手动转换绝对路径为file://协议
  若必须使用绝对路径，可手动将其转换为ESM支持的URL格式：

  import localFont from 'next/font/local'
  const fontUrl = new URL('C:/my-project/public/fonts/custom.ttf').href
  const customFont = localFont({ src: fontUrl })
  

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