Vercel部署Next.js项目时Axios请求404错误求助

核心原因 #

你遇到的404错误本质是Next.js在Vercel构建阶段（预渲染页面时），尝试访问尚未部署完成的生产环境API路由。此时Vercel还未启动API服务，硬编码的生产环境URL自然无法返回数据，导致预渲染失败、构建退出。

最优解决方案：直接在Server Component中调用Prisma #

Next.js 13+ App Router的页面默认是Server Component，完全可以跳过API路由，直接在组件内执行Prisma查询——这既避免了HTTP请求的额外开销，也从根源上解决了构建时API未就绪的问题。

修改app/page.tsx如下：

import Card from "@/components/Card";
import { prisma } from "@/lib/database";

const getPosts = async () => {
  // 直接复用API路由中的Prisma查询逻辑
  const allPosts = await prisma.post.findMany({
    include: {
      comments: true,
      author: {
        select: {
          name: true,
          image: true,
        },
      },
    },
  });
  return allPosts;
};

export default async function Home() {
  const posts = await getPosts();
  return (
    <div>
      {posts.length === 0 ? (
        <div>
          <p>No Posts have been made yet</p>
        </div>
      ) : (
        <div>
          {posts.map((post: any) => (
            <div key={post.id}>
              <Card
                id={post.id}
                title={post.title}
                content={post.content}
                comments={post.comments}
                noComments={post.noComments}
                noLikes={post.noLikes}
                name={post.author.name}
                image={post.author.image}
              />
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

备选方案：保留API路由并改用客户端渲染 #

如果你坚持要通过API路由获取数据，可以将页面改为客户端组件，让数据请求在浏览器端执行（避开构建阶段的预渲染），同时改用相对路径避免硬编码域名：

'use client';
import Card from "@/components/Card";
import axios from "axios";
import { useEffect, useState } from "react";

export default function Home() {
  const [posts, setPosts] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchPosts = async () => {
      // 用相对路径替代硬编码域名，适配任意部署环境
      const url = process.env.NODE_ENV === "development"
        ? "http://localhost:3000/api/posts"
        : "/api/posts";
      const res = await axios.get(url);
      setPosts(res.data);
      setLoading(false);
    };
    fetchPosts();
  }, []);

  if (loading) return <div>Loading...</div>;

  return (
    <div>
      {posts.length === 0 ? (
        <div>
          <p>No Posts have been made yet</p>
        </div>
      ) : (
        <div>
          {posts.map((post) => (
            <div key={post.id}>
              <Card
                id={post.id}
                title={post.title}
                content={post.content}
                comments={post.comments}
                noComments={post.noComments}
                noLikes={post.noLikes}
                name={post.author.name}
                image={post.author.image}
              />
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

额外检查项 #

1. 确认Vercel项目已正确配置DATABASE_URL环境变量，指向Render的PostgreSQL数据库，避免Prisma连接失败。
2. 部署前本地执行npx prisma generate && next build，验证构建流程是否正常。

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