Next.js 13项目部署失败：Vercel返回prerender-error错误求助

问题根源 #

你这情况是Vercel预渲染静态页面时失败，但本地能正常跑，核心问题出在页面的API请求和预渲染逻辑不匹配：

• 你的详情页是动态路由（依赖params.id），但Next.js 13 App Router默认会尝试静态预渲染所有页面，此时Vercel无法获取动态参数对应的真实数据，或者API请求本身有问题。
• 代码里的API地址https://api/v1/news/${id}明显不完整，本地可能靠代理或环境变量补全了域名，但Vercel环境没配置，导致请求失败。

具体修复方案 #

1. 补全API完整地址 #

要么直接写全API域名：

const res = await axios.get(`https://你的真实API域名/v1/news/${id}`);

要么用环境变量管理，在Vercel项目设置里添加NEXT_PUBLIC_API_BASE_URL变量，代码里改成：

const res = await axios.get(`${process.env.NEXT_PUBLIC_API_BASE_URL}/v1/news/${id}`);

2. 指定动态渲染策略 #

如果新闻内容是实时更新的，或者没法预先生成所有id，给页面加上动态渲染指令，跳过预渲染：

// 顶部添加这行，强制每次请求都动态获取数据
export const dynamic = "force-dynamic";

import NewsDetailContainer from "@/containers/NewsDetailContainer";
import axios from "axios";

const DetailPage = async ({ params }) => {
  let newsDetail;
  const getNewsDetail = async (id) => {
    const res = await axios.get(`https://你的真实API域名/v1/news/${id}`);
    return res.data;
  };

  newsDetail = await getNewsDetail(params.id);

  return <NewsDetailContainer newsInfo={newsDetail} />;
};

export default DetailPage;

3. 预生成所有静态页面 #

如果新闻id是固定的、可以批量获取，用generateStaticParams让Vercel提前预渲染所有详情页：

import NewsDetailContainer from "@/containers/NewsDetailContainer";
import axios from "axios";

// 先获取所有新闻id，生成预渲染参数
export async function generateStaticParams() {
  const res = await axios.get(`https://你的真实API域名/v1/news`);
  const newsList = res.data;
  
  return newsList.map(news => ({
    id: news.id.toString(),
  }));
}

const DetailPage = async ({ params }) => {
  let newsDetail;
  const getNewsDetail = async (id) => {
    const res = await axios.get(`https://你的真实API域名/v1/news/${id}`);
    return res.data;
  };

  newsDetail = await getNewsDetail(params.id);

  return <NewsDetailContainer newsInfo={newsDetail} />;
};

export default DetailPage;

4. 检查API网络权限 #

如果你的API是内部服务，得确保Vercel服务器能访问到，比如给API的防火墙加Vercel的IP白名单，或者把API改成公网可访问。

内容的提问来源于stack exchange，提问作者Rahil Əliyev