Cannot build an unreachable URL for a kubernetes environment

[willredington]

This app will be calling a service running in kubernetes in a private network. The API_ROOT will be unreachable during build-time, but during the build, nextjs tries to call the API, which is unreachable and fails. I've tried disabling the cache. The documentation doesn't seem to be clear about how to disable static rendering.

export async function fetchDomains() {
// npm run build fails because API_ROOT/domains is unreachable
  const response = await fetch(`${env.API_ROOT}/domains`, {
    method: "GET",
    next: {
      revalidate: 300,
    },
  });

  if (!response.ok) {
    throw new Error(`Failed to fetch domains: ${response.statusText}`);
  }

  try {
    const data: unknown = await response.json();
    return DomainResponse.parse(data);
  } catch (err) {
    console.error("Failed to validate domains", err);
    throw err;
  }
}

// page.tsx

export default async function HomePage() {
  const fetchedDomains = await fetchDomains();

  const domainItems = fetchedDomains.domains.map((domain) => ({
    url: domain,
    name: getRootSubdomain(domain) ?? domain,
  }));

  return (
    <main className="flex min-h-screen flex-col items-center justify-center">
      <div className="container flex flex-col items-center justify-center gap-12 px-4 py-16">
        <div className="grid grid-cols-3 gap-4">
          {domainItems.map((item) => (
            <Card key={item.name}>
              <CardHeader>
                <CardTitle>{item.name}</CardTitle>
              </CardHeader>
              <CardFooter>
                <Button asChild variant="link">
                  <Link
                    href={item.url}
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    Visit
                  </Link>
                </Button>
              </CardFooter>
            </Card>
          ))}
        </div>
      </div>
    </main>
  );
}

Current:

Cannot perform a npm build on a server component for a currently unreachable endpoint. Endpoint will eventually be reachable at runtime, but not at build time.

Expected:
Able to perform a build and not enforce static rendering for an unreachable URL

[icyJoseph]

Add, export const dynamic = 'force-dynamic' to your HomePage.

[suprunchuk]

During the build (npm run build) Next.js is trying to make a request to the API (fetchDomains), which is not available at the build stage, since it is located in a closed Kubernetes network. This leads to an assembly error.
You need to prevent this request from being executed during the build and make sure that the data is requested only at the execution stage. To do this, you can use the dynamic behavior of the page by disabling static generation.
To change the page rendering to server-side: Add export const dynamic = 'force-dynamic'; to page.tsx. This will force Next.js render the page only on the server and do not try to do static generation.

// page.tsx
export const dynamic = 'force-dynamic';

export default async function HomePage() {
  const fetchedDomains = await fetchDomains();

  const domainItems = fetchedDomains.domains.map((domain) => ({
    url: domain,
    name: getRootSubdomain(domain) ?? domain,
  }));

  return (
    <main className="flex min-h-screen flex-col items-center justify-center">
      <div className="container flex flex-col items-center justify-center gap-12 px-4 py-16">
        <div className="grid grid-cols-3 gap-4">
          {domainItems.map((item) => (
            <Card key={item.name}>
              <CardHeader>
                <CardTitle>{item.name}</CardTitle>
              </CardHeader>
              <CardFooter>
                <Button asChild variant="link">
                  <Link
                    href={item.url}
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    Visit
                  </Link>
                </Button>
              </CardFooter>
            </Card>
          ))}
        </div>
      </div>
    </main>
  );
}