Next.js首页预渲染失败求助：Vercel构建报错已卡4天

核心问题分析 #

你遇到的预渲染失败，核心原因有两个：

1. API请求地址错误：构建时用localhost:3000完全无效——Vercel构建环境是远程服务器，localhost指向的是Vercel的构建容器，不是你本地的开发服务器，自然访问不到API。
2. fetch代码异步逻辑错误：原fetch版本里res.json()没加await，导致data是Promise对象，直接断言成Social[]会引发类型错误和数据异常。

针对性解决方案 #

1. 修正API请求路径

不管用axios还是fetch，都改用相对路径请求API（如果是Next.js的API路由），无需加域名：

修正后的axios版本：

import { Social } from "@/typing";
import axios from "axios";

export const fetchSocials = async() => {
    const res = await axios.get(`/api/getSocials`, {
        timeout: 7000,
    });

    return res.data.socials as Social[];
}

修正后的fetch版本：

import { Social } from "@/typing";

export const fetchSocials = async() => {
    const res = await fetch(`/api/getSocials`);
    // 必须加await，res.json()是异步操作
    const data = await res.json();
    const socials: Social[] = data.socials;

    return socials;
}

2. 预渲染场景下的数据获取规范

如果是Next.js项目，预渲染页面（比如首页）的数据应该在getStaticProps或getServerSideProps中获取，而不是在组件内部异步请求——预渲染时组件的异步请求可能不会被Vercel正确捕获，导致渲染失败。

示例（首页getStaticProps用法）：

// pages/index.tsx
import { fetchSocials } from "@/utils/fetchSocials";
import { Social } from "@/typing";

export async function getStaticProps() {
    const socials = await fetchSocials();
    return {
        props: {
            socials,
        },
    };
}

export default function Home({ socials }: { socials: Social[] }) {
    // 直接使用传入的socials，无需在组件内发起异步请求
    return (
        <div>
            {/* 你的页面内容 */}
        </div>
    );
}

3. 调试技巧

• 查看Vercel构建日志：在Vercel控制台找到对应项目的构建记录，查看具体错误栈，确认是API请求失败还是代码逻辑错误。
• 本地模拟构建：执行vercel build命令在本地复现构建问题，方便快速调试。

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