NextJS执行next build时fetch报无效URL错误，next dev正常

核心排查与修复 #

1. 检查API路由的路径与文件名 #

生产构建对路径大小写严格区分，开发环境则不会。确认pages/api/getAllAlumniInfoList.js（或.ts）的文件名、路径完全匹配你fetch的地址——比如如果实际文件名是GetAllAlumniInfoList.js，dev环境能正常访问，但build时会因为大小写不匹配返回无效URL。其他页面正常，大概率是这个页面的API路由存在大小写或路径拼写错误。

2. 区分静态/动态渲染场景的fetch方式 #

如果当前页面是静态生成（SSG），next build预渲染时，相对路径/api/xxx会因为缺少完整域名导致URL无效：

• 若无需预渲染，在页面顶部添加：

  export const dynamic = 'force-dynamic';
  

  强制页面动态渲染，fetch会在客户端执行，相对路径可正常工作。
• 若需要在服务器端预渲染，补全请求域名：

  const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || 'http://localhost:3000';
  const data = await fetch(`${baseUrl}/api/getAllAlumniInfoList`).then(res => res.json());
  

  在.env文件中配置生产环境的NEXT_PUBLIC_BASE_URL为你的域名。

3. 修复useSWR无限循环问题 #

你遇到的无限循环，通常是因为将动态变化的搜索参数直接作为useSWR的key，且参数在渲染周期中被意外更新。正确用法：

import useSWR from 'swr';
import { useState } from 'react';

const fetcher = async (url) => fetch(url).then(res => res.json());

export default function SearchPage() {
  const [searchQuery, setSearchQuery] = useState('');
  // 仅当搜索参数存在时发起请求，key稳定
  const { data } = useSWR(
    searchQuery ? `/api/getAllAlumniInfoList?query=${encodeURIComponent(searchQuery)}` : null,
    fetcher
  );

  const handleSearch = (e) => {
    setSearchQuery(e.target.value);
  };

  return (
    // 页面渲染内容
  );
}

• 当searchQuery为空时，将key设为null，useSWR会停止请求，避免无效调用。
• 若使用POST请求，可在fetcher中携带参数，确保key包含所有搜索条件的哈希值，保证key的稳定性。

额外排查项 #

• 确认当前页面的fetch逻辑位置：如果在组件顶层直接使用await fetch（而非getServerSideProps/getStaticProps或客户端useEffect中），dev环境能运行，但build时会因静态预渲染报错。对比其他正常页面的fetch执行位置，调整到正确的生命周期中。

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