在Vercel部署Next.js+TypeScript项目时遇FetchError求助

核心原因 #

你遇到的预渲染错误，本质是Next.js在构建阶段（预渲染时）请求自己的Vercel部署域名导致的：

• 构建过程中，应用还未完全上线，请求部署域名会返回HTML错误页面（比如404），而非预期的JSON数据，所以解析时出现Unexpected token <（HTML的起始标签）。
• 本地运行时请求localhost:3000没问题，是因为本地开发服务器和API路由同时运行，能正常响应JSON。

解决方案 #

方案1：直接调用API逻辑（推荐） #

不需要通过HTTP请求调用自己的API路由，直接复用API里的核心数据获取逻辑：

1. 抽离API核心逻辑
   在你的pages/api/getProjects.ts中，把数据获取的代码抽成独立函数：

   import type { NextApiRequest, NextApiResponse } from 'next'
   import { Project } from '../../typing'
   
   // 核心数据获取逻辑
   export async function getProjectsData(): Promise<Project[]> {
     // 这里替换成你实际获取数据的逻辑（比如读数据库、文件、外部服务）
     const projects: Project[] = [
       { id: 1, name: '项目1' },
       // ...其他项目数据
     ]
     return projects
   }
   
   // 原API路由handler
   export default async function handler(
     req: NextApiRequest,
     res: NextApiResponse<{ projects: Project[] }>
   ) {
     const projects = await getProjectsData()
     res.status(200).json({ projects })
   }
   

2. 修改fetch函数
   直接调用抽离的函数，替代HTTP请求：

   import { Project } from "../typing";
   import { getProjectsData } from "../pages/api/getProjects"; // 路径根据实际结构调整
   
   export const fetchProjects = async()=>{
     const projects: Project[] = await getProjectsData();
     return projects;
   }
   

方案2：添加错误处理（辅助排查） #

如果必须保留HTTP请求（比如调用外部服务），添加错误处理避免崩溃，同时确保构建时API可访问：

export const fetchProjects = async()=>{
  const res = await fetch(`${process.env.MY_BASE_URL}/api/getProjects`);
  
  // 先检查请求是否成功
  if (!res.ok) {
    console.error(`请求失败，状态码: ${res.status}`);
    // 可以返回空数组或默认数据，避免预渲染崩溃
    return [];
  }

  const data = await res.json();
  const projects: Project[] = data.projects;

  return projects;
}

方案3：改用增量静态再生（ISR） #

如果数据需要定期更新，且不想在构建时依赖外部请求，可以用ISR代替纯静态预渲染：
在getStaticProps中添加revalidate参数，让页面在构建后定期重新生成：

export async function getStaticProps() {
  const projects = await fetchProjects();
  return {
    props: { projects },
    revalidate: 60, // 每60秒重新生成页面
  };
}

这样构建时即使请求失败，后续也会在服务器端重新尝试获取数据。

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