NextJS应用本地构建正常，部署至Vercel时FetchError失败求助

核心结论 #

必须先把Strapi部署到公网环境，Vercel的服务器无法访问你本地运行的Strapi服务——localhost:1337仅在你的本地电脑生效，Vercel环境里的localhost指向它自己的服务器，自然连不上你的本地服务。

具体操作步骤 #

• 部署Strapi到线上：选择Strapi官方云平台、Render、Heroku等服务部署你的Strapi项目，部署完成后会得到一个公网可访问的域名（比如https://your-strapi-app.com）。
• 配置环境变量：
  1. 本地项目的.env.local文件中，设置NEXT_PUBLIC_STRAPI_API_URL=https://your-strapi-app.com
  2. 登录Vercel后台，进入你的NextJS项目，在「Settings → Environment Variables」中添加同样的变量NEXT_PUBLIC_STRAPI_API_URL，值填写线上Strapi的域名。
• 检查fetchAPI实现：确保你的fetchAPI函数基于环境变量拼接请求地址，示例如下：

  export async function fetchAPI(endpoint, options = {}) {
    const baseUrl = process.env.NEXT_PUBLIC_STRAPI_API_URL;
    const url = new URL(endpoint, baseUrl);
    
    // 处理请求参数（比如populate）
    if (options.populate) {
      url.searchParams.append('populate', options.populate.join(','));
    }
    
    const response = await fetch(url.toString(), {
      headers: {
        'Content-Type': 'application/json',
        // 如果Strapi开启了API鉴权，需额外配置密钥变量
        // 'Authorization': `Bearer ${process.env.STRAPI_API_TOKEN}`
      }
    });
    
    if (!response.ok) {
      throw new Error(`请求Strapi失败: ${response.statusText}`);
    }
    
    return response.json();
  }
  

• 验证后重新部署：本地启动项目，确认能通过线上Strapi域名正常获取数据后，再推送代码到Vercel重新构建。

错误原因说明 #

Vercel构建NextJS项目时会执行getStaticProps函数，此时它的服务器尝试访问http://localhost:1337，但这个地址仅能在你的本地电脑访问，Vercel的公网服务器无法连接到你本地的服务，因此抛出ECONNREFUSED错误。

内容的提问来源于stack exchange，提问作者Studio by the pine.