Question 216682 in Javascript Question posted in
A very good W3school tutorial can be found here.

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

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

This is the error page

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

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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.


  2. 0

    You can not use the Next.js api routes during build. Instead use the logic for fetching directly inside the getData function. Or fetch the posts from some external url.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search