使用getStaticProps预渲染Next.js页面时出现ECONNRESET错误

可能的原因及对应解决办法 #

1. 网络环境差异（最常见） #

getStaticProps是在构建阶段/服务器端执行的，和客户端浏览器的网络环境完全不同：如果你的构建机器（本地开发的Node环境、CI/CD服务器等）无法访问目标API（比如API在内网、被防火墙拦截，或者你用了相对路径/本地域名如localhost:3000），就会触发连接重置错误。而客户端浏览器处于能访问该API的网络环境，所以useEffect里的请求能正常工作。

解决办法：

• 确保fetch使用完整的绝对HTTPS URL，比如Typicode的示例API：https://jsonplaceholder.typicode.com/posts，不要用相对路径或简写。
• 在构建机器上用curl命令测试网络连通性，比如执行curl https://jsonplaceholder.typicode.com/posts，确认能正常返回数据。

2. 请求缺少必要的请求头 #

部分API会拒绝非浏览器发起的请求，此时需要在fetch中添加模拟浏览器的请求头：

export async function getStaticProps() {
  try {
    const res = await fetch('https://jsonplaceholder.typicode.com/posts', {
      headers: {
        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36'
      }
    });
    const data = await res.json();
    return { props: { data } };
  } catch (err) {
    console.error('请求失败:', err);
    // 兜底返回默认数据，避免构建失败
    return { props: { data: [] } };
  }
}

3. 请求超时或连接不稳定 #

服务器端的fetch默认没有超时设置，若API响应慢或连接不稳定，可能触发ECONNRESET。可以添加超时控制：

export async function getStaticProps() {
  const controller = new AbortController();
  const timeout = setTimeout(() => controller.abort(), 5000); // 设置5秒超时

  try {
    const res = await fetch('https://jsonplaceholder.typicode.com/posts', {
      signal: controller.signal
    });
    const data = await res.json();
    clearTimeout(timeout);
    return { props: { data } };
  } catch (err) {
    console.error('请求超时或失败:', err);
    return { props: { data: [] } };
  }
}

4. 代码语法错误（你的示例代码存在） #

你的Home组件函数缺少大括号，会导致语法错误，修复后再测试：

function Home({ data }) {
  return <p>Hello</p>;
}

export async function getStaticProps() {
  // ... 其他代码
}

export default Home;

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