NextJS 13.1.6更新后API请求URL被覆盖问题排查与解决

问题成因 #

1. .env文件变量格式错误：你写的CONST NEXT_PUBLIC_API_URL = 'HTTPS://API.COM';不符合.env文件语法规范——.env里不需要加CONST关键字、分号，多余的符号会导致环境变量无法被正确解析，最终process.env.NEXT_PUBLIC_API_URL的值为undefined。
2. NextJS 13 App Router的fetch默认行为：在App Router的Server Component中，当fetch传入的URL为空/未定义时，NextJS会自动将请求转向当前页面的内部数据路由（即/_next/data/...路径），这是框架默认的路由数据请求逻辑。

解决方法 #

• 修正.env文件格式：
  把.env里的变量定义改成正确格式，去掉多余的关键字、引号和分号：

  NEXT_PUBLIC_API_URL=https://api.com
  

  注意：变量名大小写敏感，NEXT_PUBLIC_前缀不能少，否则客户端组件无法访问该变量。
• 验证环境变量加载状态：
  在请求代码前添加日志，确认变量是否正确读取：

  // 服务端组件看终端日志，客户端组件看浏览器控制台
  console.log('当前API URL:', process.env.NEXT_PUBLIC_API_URL);
  const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/some-path`);
  

• 确保fetch使用完整绝对路径：
  用模板字符串拼接成完整的绝对URL，避免因路径不完整触发NextJS的默认路由请求逻辑。
• 强制fetch跳过路由数据处理（可选）：
  如果确认环境变量正常，但仍出现路由跳转问题，可以给fetch添加配置，明确告知框架这是外部API请求：

  const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/some-path`, {
    next: { revalidate: 0 }, // 禁用缓存，强制请求外部API
    cache: 'no-store'
  });
  

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