ECONNREFUSED: Error occurred prerendering page [app router]

[woile]

I have a backend in rust running in a different port, and I use nextjs to fetch data from it.

I have 2 files client.ts and recipes/pages.tsx, the following are simplified samples:

// client.ts
import 'server-only'

export async function getRecipes(): Promise<Recipe[]> {
  const res = await fetch(`${process.env.API_URL}/api/v1/recipes`, {
    cache: "no-store",
  });

  return await res.json();
}

import { getRecipes } from "@/lib/client";

// recipes/pages.tsx
export default async function ListRecipes() {
  const recipes = await getRecipes();
  
  return (
    <div className="sm:mt-8 grid gap-4 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 ">
      {recipes.map((recipe) => (
        <SmallRecipe recipe={recipe} key={recipe.recipe_id} />
      ))}
    </div>
  );
}

When running npm run build I get the following error:

> next build

   ▲ Next.js 14.0.2
   - Environments: .env

 ✓ Creating an optimized production build    
 ✓ Compiled successfully
 ✓ Linting and checking validity of types    
 ✓ Collecting page data    
   Generating static pages (1/12)  [=   ] 
TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11372:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  cause: Error: connect ECONNREFUSED 0.0.0.0:8081
      at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1595:16)
      at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
    errno: -61,
    code: 'ECONNREFUSED',
    syscall: 'connect',
    address: '0.0.0.0',
    port: 8081
  }
}
Error occurred prerendering page "/recipes". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11372:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

I don't understand why it needs the rust backend to build.

Thanks!

[woile]

Fixed it by adding to my page.tsx the folowing:

export const dynamic = 'force-dynamic'

See more: https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config

[carina7matei]

thank you soooo much, im crying, i've been trying to deploy my project for like 2 days and i kept getting errors, and your answer saved me

[jamesmagoo]

SAVIOUR