NextJs 13 App Router - Error occurred prerendering page. TypeError: fetch failed

Question

My project (built on NextJs 13 App Router) crashed during production (deployment on Vercel via github) but it worked perfectly on development. The error i got is

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

Here is my Feed page.jsx that has the getdata function

    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;

Note that the BASE_URL for development is localhost and I have updated it to the vercel domain on vercel environment files for production

There shouldnt be a fetch error on production because its fetching okay on development

Answer 1

Apparently, Next App router's API routes will be inaccessible until after build.

All I had to do was to remove(comment out) the the getdata function I was fetching to in the client side before build and the build was successful. Re-added the getdata() afterwards and everything worked perfectly.

I will advice if you want to deploy your project on the latest NextJs App route, you should build your NextJs API routes first before the complete build.