fetch & env vars with app router & static builds

[bripkens]

Hey folks,

I am desiring to use app router with fetch. However, the exact API endpoint is not known at build time and this is causing issues. Sample code:

export async function UsersView() {
  const resp = await fetch(
    `${process.env.API_BASE_URL}/api/users`
  );

  // ...
}

The value for the env var is not known at build time – and the API is also not available at build time.

This causes issues such as the following when running next build:

> next build

- info Creating an optimized production build
- info Compiled successfully
- info Linting and checking validity of types
- info Collecting page data
[    ] - info Generating static pages (0/7)TypeError: Failed to parse URL from undefined/api/users
    at new Request (node:internal/deps/undici/undici:6949:19)

I can kind of circumvent the issue by disabling caching for the fetch request { cache: "no-store" }, or by setting export const dynamic = "force-dynamic"; on the route. However, this is not desirable. Caching, deduping etc. should all be supported, albeit dependent on the environment variable value.

To clarify: The definition of env vars is working fine. This question/issue is specifically about the fact that the API is not known/available at build time.

How are others handling this?

Update

Turned this into a Next.js issue #50828

[devjiwonchoi]

Make sure you follow the .env file convention of Next.js.

• .env // default
• .env.development // develop
• .env.production // production (build)
• .env.local // Overrides all .envs

.env.local always overrides the defaults set.

Your API_ENDPOINT should be stored in .env.production for the next build.

// .env.production

// ...

API_ENDPOINT=YOUR_API_ENDPOINT

// ...

Reference

• .env Examples: https://github.com/vercel/next.js/tree/canary/examples/environment-variables
• Environment Variables: https://nextjs.org/docs/app/building-your-application/configuring/environment-variables

[devjiwonchoi]

Why would you try to create a static page with 'fetch' with an invalid URL?

In that case, the server side fetch will never work. If the API Server is not running during the build, I'd recommend you to use Dynamic fetch instead of static.

[bripkens]

Here is the thing: I never stated that the page should be static. And to quote my original question:

I can kind of circumvent the issue by disabling caching for the fetch request { cache: "no-store" }, or by setting export const dynamic = "force-dynamic"; on the route. However, this is not desirable. Caching, deduping etc. should all be supported, albeit dependent on the environment variable value.

[HamAndRock]

If all you need is to get over that error for fetch during build, just wrap it into try catch, that will still show an error but build will be successfull and on production the API_URL should be already known and it will be cached accordingly when user visits a page. But you wont get the benefit of prebuilding [pages].

[bripkens]

That will work, yes. I am trying to learn however whether there is a "proper" way of doing this. Currently I am getting the feeling that there is a missing element in the Next.js app router story.

[HamAndRock]

That's how we do it :/. Yeah as far as I know, this is "valid" solution in a way from my point of view. There are no other ways as far as I know.

[mxmknnv]

I have a similar case. My infrastructure is configured in a such way that my frontend and backend are building in parallel. So during the Next build phase my API server does not work - it cannot respond to requests with data. I understand that I can use requests without caching, but I want to take full advantage of static generation and caching. Is it possible to set this up somehow?

[bripkens]

Static generation at build time is only possible when the API server is available at build time.

[bripkens]

There is now a workaround for this that leverages Next.js' headers and middleware capability to circumvent these current limitations. For more information, see this issue comment.

#50828 (comment)