Next.js部署Vercel时预渲染页面/出错求助

可能的原因及对应解决方案 #

1. 外部图片域名未在Next.js配置中授权

你的代码里用Image组件加载了kush-web.web.app域名的图片，但Next.js默认限制外部图片来源，必须显式授权。在项目根目录的next.config.js中添加以下配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'kush-web.web.app',
        pathname: '/images/**',
      },
    ],
  },
}

module.exports = nextConfig

2. getStaticProps中的API请求失败

getStaticProps在Vercel构建阶段执行，如果你的fetchExperience、fetchPageInfo等方法请求的是本地服务（比如localhost开头的地址），或者依赖未配置的环境变量，会直接导致请求失败：

• 检查utils/fetchApi里的请求地址，确保是公网可访问的API
• 如果用了环境变量（比如process.env.NEXT_PUBLIC_API_URL），要在Vercel项目的「Settings → Environment Variables」中添加对应变量，再重新部署

3. 数据类型不匹配引发运行时错误

getStaticProps获取的数据可能和fetchInterface定义的类型不一致，TypeScript编译阶段可能没检测到，但构建预渲染时会抛出异常：

• 在fetchApi的每个请求方法里添加错误捕获，打印返回的原始数据，确认是否符合接口定义
• 可以在getStaticProps里临时加console.log输出获取到的数据，然后查看Vercel部署日志的完整内容定位问题

4. 构建缓存或依赖残留问题

即便你本地删了node_modules和.next，Vercel部署时可能还会用旧缓存：

• 在Vercel部署页面选择「Redeploy」，并取消勾选「Use existing build cache」，强制重新构建
• 本地先执行npm run build，确认本地能正常构建后再部署

额外排查建议 #

• 查看Vercel完整构建日志，「Error occurred prerendering page "/"」下方一般会有具体错误信息（比如请求超时、类型不兼容等），根据具体提示定位问题
• 本地先复现构建错误，解决后再推送到Vercel部署

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