我的项目(构建在NextJs 13 App Router上)在生产过程中崩溃(通过github在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
字符串
的数据
下面是具有getdata函数的Feedpage.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}>
{/* <h1>My Post</h1> */}
<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错误,因为在开发环境中fetch是可以的
2条答案
按热度按时间qrjkbowd1#
在构建过程中不能使用Next.js API路由。而是直接在getData函数中使用获取逻辑。或者从外部URL获取文章。
vsnjm48y2#
显然,下一个应用程序路由器的API路由将无法访问,直到构建后。
我所要做的就是在构建之前删除(注解掉)我在客户端获取的
getdata
函数,然后构建成功。后来重新添加了getdata()
,一切都很完美。我建议如果你想在最新的NextJs应用程序路由上部署你的项目,你应该在完成构建之前先构建你的NextJs API路由。