Next.js 14 Build Prerender Error Fix

Are you frustrated by this error?

Error when trying to build with npm run build command

How did I find the solution

Many who are trying the new Next.js api route will face this common issue.

Since the api route has recently been introduced hence there aren’t many solution out there yet. It took me some days to figure this out.

The solution is actually very simple. Even after scanning the docs for hours and by checking every tab, I still could not find the answer to my problem.

File Conventions: Route Segment Config | Next.js

Next.js route-segment configuration

How to Fix?

In your file where you are fetching the data write:

export const dynamic = "force-dynamic";
export const fetchCache = "force-no-store";

on top of your Functions

For me it is in app/blog/page.jsx

My code is:

import BlogCard from "@/components/cards/BlogCard";
import { BASE_URL } from "@/utils/constants/constants";
import { notFound } from "next/navigation";

export const dynamic = "force-dynamic";
export const fetchCache = "force-no-store";

const getData = async () => {
  const res = await fetch(`${BASE_URL}/api/posts`);
  const posts = await res.json();
  if (!res.ok) {
    throw new Error("Failed to fetch data");
  }
  return posts;
};


const Blog = async () => {
  const data = await getData();
  if (!BASE_URL && !data) return notFound();
  return data.map((item) => (
    <BlogCard
      key={item._id}
      id={item._id}
      title={item.title}
      img={item.img}
      content={item.content}
    ></BlogCard>
  ));
};

export default Blog;

This should fix the problem

Try now again

NPM run build