Vercel部署Next.js项目时npm run build报错求助

1. 修复未转义单引号错误（react/no-unescaped-entities） #

打开./src/components/Pricing.jsx，找到所有包含未转义单引号的文本，用以下任意一种方式修复：

• 转义单引号：把'改成\'，示例：

  // 错误写法
  <p>It's the best pricing tier</p>
  // 修复后
  <p>It\'s the best pricing tier</p>
  

• 用双引号包裹文本：

  <p>"It's the best pricing tier"</p>
  

• 使用模板字符串：

  <p>{`It's the best pricing tier`}</p>
  

2. 处理<img>标签警告（改用Next.js的<Image />） #

部分严格构建环境会将警告转为错误导致构建失败，建议替换：

• 先导入Next.js的Image组件：

  import Image from 'next/image'
  

• 替换原<img>标签，需指定width和height，或用布局属性适配，示例：

  // 原写法
  <img src="/logo.png" alt="Logo" />
  // 替换后（固定尺寸）
  <Image src="/logo.png" alt="Logo" width={100} height={100} />
  

  如需响应式布局，可配合父容器的position: relative使用：

  <Image src="/logo.png" alt="Logo" fill className="object-contain" />
  

3. 重新构建部署 #

完成修复后，本地先运行npm run build验证是否成功，再提交代码到Vercel重新部署。不建议长期使用CI='' npm run build跳过检查，修复代码本身的问题才是根本解决方式。

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