Next.js13 App Router Vercel部署预渲染失败，本地正常求助

本地基于Next.js 13 App Router开发的项目运行正常，但部署到Vercel生产环境时崩溃，报错如下：

Error: Failed to fetch data
at getData (/vercel/path0/.next/server/app/feeds/page.js:401:15)
at process.processTicksAndRejections 
(node:internal/process/task_queues:95:5)
at async Feed (/vercel/path0/.next/server/app/feeds/page.js:432:19)
Error occurred prerendering page "/feeds". Read more: 
https://nextjs.org/docs/messages/prerender-error
Error: Failed to fetch data
at getData (/vercel/path0/.next/server/app/feeds/page.js:401:15)
at process.processTicksAndRejections 
(node:internal/process/task_queues:95:5)
at async Feed (/vercel/path0/.next/server/app/feeds/page.js:432:19)
- info Generating static pages (10/10)
> Export encountered errors on following paths:
/feeds/page: /feeds
Error: Command "npm run build" exited with 1

Feed页面（page.jsx）代码如下：

import Navbar from "@/components/Navbar/Navbar";
import { CheckStatus } from "@/components/SessionStatus/Sess";
import Link from "next/link";
import React from "react";

async function getData() {
  const res = await fetch(`${process.env.BASE_URL}/api/feeds`, {
    next: { revalidate: 10 },
  });
  if (!res.ok) {
    throw new Error("Failed to fetch data");
  }
  const data = await res.json();
  return data;
}

const Feed = async () => {
  const feeds = await getData();
  return (
    <>
      <CheckStatus>
        <Navbar />
        <div className="text-center py-4">Feed</div>

        {feeds?.map((feed) => (
          <div className=" p-8 border-y-2" key={feed?._id}>
            <h2>{feed?.content}</h2>
          </div>
        ))}
        <Link className="fixed bottom-8 right-8 text-7xl" href="/feeds/compose">
          +
        </Link>
      </CheckStatus>
    </>
  );
};

export default Feed;

注：开发环境BASE_URL设为localhost，已在Vercel环境变量中更新为生产环境的Vercel域名，仍出现fetch错误。

问题原因及解决办法 #

原因1：预渲染阶段无法访问生产域名 #

Vercel部署时会执行静态页面生成（SSG），此时页面的异步数据获取逻辑在构建阶段运行。如果BASE_URL指向未完全部署完成的Vercel生产域名，构建时该域名无法被正常访问，导致fetch失败。

解决办法1：直接调用API逻辑而非HTTP请求 #

同项目内的API路由无需通过外部HTTP请求获取数据，直接导入API处理函数调用即可：

// 导入/api/feeds路由的GET处理函数（假设路由文件为app/api/feeds/route.js）
import { GET } from "@/app/api/feeds/route";

async function getData() {
  // 构造Request对象传入API函数
  const res = await GET(new Request(`${process.env.BASE_URL}/api/feeds`));
  if (!res.ok) {
    throw new Error("Failed to fetch data");
  }
  const data = await res.json();
  return data;
}

原因2：环境变量未正确生效 #

Vercel环境变量可能存在拼写错误（区分大小写）、未在构建阶段加载，或未重新触发构建使变量生效。

解决办法2：验证并更新环境变量配置 #

• 登录Vercel控制台，进入项目「Settings」→「Environment Variables」，确认BASE_URL变量名拼写正确，值为完整的生产域名（如https://your-project.vercel.app），并确保勾选「Automatically expose System Environment Variables」。
• 手动触发一次重新部署，确保新的环境变量在构建阶段被加载。

原因3：静态预渲染不适合动态数据场景 #

如果/feeds页面依赖用户会话或实时动态数据，静态预渲染（SSG）会因构建阶段无法获取动态数据而失败。

解决办法3：修改页面渲染模式 #

在页面组件顶部添加渲染模式配置，强制使用服务器端渲染（SSR）或增量静态再生（ISR）：

// 强制服务器端渲染，每次请求都重新生成页面
export const dynamic = 'force-dynamic';

// 或者保留ISR逻辑，和原revalidate配置配合
// export const revalidate = 10;

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