NextJS中能否在工具类调用fetch？生产环境遇504超时

首先明确：在工具文件中封装API调用本身是允许的，生产环境出现504超时的问题大概率是请求行为差异或环境配置问题导致的，而非工具文件的写法本身。

可能的原因 #

1. 环境变量未正确注入：虽然NEXT_PUBLIC_前缀的变量会暴露给客户端，但生产环境打包时，工具文件的变量替换可能出现异常，导致请求了错误的API地址，进而超时。
2. Fetch请求配置差异：页面组件中的fetch会被Next.js自动优化（比如默认缓存、请求头补全），而工具文件中的fetch没有继承这些优化配置，导致API服务器响应缓慢或拒绝请求。
3. 服务端/客户端执行混淆：如果工具函数意外在服务端渲染阶段被调用（比如被服务端组件引入），服务端环境下的fetch可能因网络配置（如防火墙、代理）问题无法访问外部API，导致超时。

排查与解决步骤 #

1. 验证环境变量正确性 #

在工具函数中添加日志，确认生产环境下API地址是否正确：

export const getProducts = async (setProducts) => {
  // 生产环境打开控制台查看此输出
  console.log('当前API地址:', process.env.NEXT_PUBLIC_API_URL);
  try {
    const resp = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/products`);
    const products = await resp.json();
    setProducts(products);
  } catch (err) {
    console.error('请求失败:', err);
  }
}

如果地址错误，检查next.config.js或环境变量文件（如.env.production）是否正确配置了NEXT_PUBLIC_API_URL。

2. 统一Fetch配置 #

给工具文件中的fetch添加与页面组件一致的配置，包括超时、请求头和缓存策略：

export const getProducts = async (setProducts) => {
  try {
    // 添加超时控制，避免无限等待
    const controller = new AbortController();
    const timeout = setTimeout(() => controller.abort(), 10000);

    const resp = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/products`, {
      signal: controller.signal,
      // 匹配页面组件中的请求头
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
      // 复用Next.js的缓存策略，和页面保持一致
      cache: 'force-cache',
    });

    clearTimeout(timeout);

    if (!resp.ok) {
      throw new Error(`请求失败，状态码: ${resp.status}`);
    }

    const products = await resp.json();
    setProducts(products);
  } catch (err) {
    console.error('获取商品列表失败:', err);
  }
}

3. 确保工具函数仅在客户端执行 #

如果使用Next.js 13+的App Router，需确保工具文件被客户端组件引入，或在工具文件顶部添加'use client'指令（如果工具函数依赖浏览器API）：

'use client'; // 仅App Router需要，Pages Router无需添加

export const getProducts = async (setProducts) => {
  // ... 函数逻辑
}

如果是Pages Router，确保调用工具函数的组件是客户端组件（默认都是），且仅在useEffect、事件回调等客户端生命周期中调用。

4. 检查API服务器配置 #

确认API服务器的防火墙、CDN或WAF规则，是否允许来自生产环境域名的请求，是否对请求来源有特殊限制（如Referer、Origin）。

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