failed to build

[xdewx]

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/nervous-mendel-7p5mxw?workspaceId=ws_CW1CqER1U5pNNAXk19HUDh

To Reproduce

1. page.tsx

export default async function Home(req: any) {
  const api = `${process.env.BASE_URL}/api/search`;
  return fetch(api, {
    method: "POST",
  })
    .then(resp=>resp.json())
    .then(resp=><div>xxxx</div>)
}

2. npm run build

why could failed to fetch make build failed? it makes no sense.

Current vs. Expected behavior

can't build and expect to build

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC PMX 6.8.12-11 (2025-05-22T09:39Z)
  Available memory (MB): 47945
  Available CPU cores: 12
Binaries:
  Node: 20.13.1
  npm: 10.5.2
  Yarn: N/A
  pnpm: 9.3.0
Relevant Packages:
  next: 15.3.3 // Latest available version is detected (15.3.3).
  eslint-config-next: 15.3.3
  react: 19.1.0
  react-dom: 19.1.0
  typescript: 5.8.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Not sure

Which stage(s) are affected? (Select all that apply)

next build (local)

Additional context

No response

[icyJoseph]

The link you provided is not working for me.

Is api/search part of your project too? If so, during build time, there's no server to respond to the POST request, so it is expected to fail.

In Server Components, you should fetch the data from source, no need to add an additional HTTP request, that, as you can see, fails at build time.

[xdewx]

The link you provided is not working for me.

Is api/search part of your project too? If so, during build time, there's no server to respond to the POST request, so it is expected to fail.

In Server Components, you should fetch the data from source, no need to add an additional HTTP request, that, as you can see, fails at build time.

you are right api/search is part of my project. but what i think is it should not test my api at build time.

after some exploring, i know it is the problem of static render, there are so many discussions about it. have to say app router hard to use.

[icyJoseph]

Not necessarily difficult. You just have to get the idea that Next.js tries to statically render as much as possible, and you can opt-out from that through certain mechanisms.

In this case, you are not using any, so-called, dynamic APIs, like params, searchParams, etc, so with the information available, Next.js tries to pre-render.

You can force certain behavior, through export const dynamic = 'force-dynamic', then Next.js will not try to pre-render this at build time. https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#dynamic

BUT! That's still not correct in my opinion.

When a request arrives to Home, we try to render a response, and hit the api/search, so we make another HTTP round trip, out to the internet and back to your project, in turn, that's likely gonna make further requests, so you are adding an additional round trip for no good reason.

You should just do the work you do in api/search, in the Server Component. At scale, you'd have a lib/search module that exposes the primitives to do a search from any environments, React Server Components, Route Handlers, etc...

• https://nextjs-faq.com/fetch-api-in-rsc

As of today, in the stable releases, Next.js decides "what to statically render" at page level, but soon, this will be possible at Component level, sort of. https://nextjs.org/docs/app/getting-started/partial-prerendering

Last but not least:

app router hard to use

This was a problem in Pages Router too :) https://nextjs-faq.com/fetch-api-in-getserversideprops

[xdewx]

thanks for your reply.

While performance is important, ease of use is even more so. wish both in nextjs!