javascript NextJs 13应用程序路由器-渲染页面时出错,TypeError:fetch failed

ff29svar  于 2023-08-02  发布在  Java
关注(0)|答案(2)|浏览(284)

我的项目(构建在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是可以的

qrjkbowd

qrjkbowd1#

在构建过程中不能使用Next.js API路由。而是直接在getData函数中使用获取逻辑。或者从外部URL获取文章。

vsnjm48y

vsnjm48y2#

显然,下一个应用程序路由器的API路由将无法访问,直到构建后。
我所要做的就是在构建之前删除(注解掉)我在客户端获取的getdata函数,然后构建成功。后来重新添加了getdata(),一切都很完美。
我建议如果你想在最新的NextJs应用程序路由上部署你的项目,你应该在完成构建之前先构建你的NextJs API路由。

相关问题