Problem Overview
I’m working on a Next.js app that connects to an Express backend API. Everything runs perfectly on my development machine where both services are running in Docker containers. But when GitHub Actions tries to build my Next.js project for testing and linting, it crashes because the build process attempts to fetch data from my backend API which isn’t running during the CI pipeline.
Error Details
Here’s what happens when the action runs npm run build:
> [email protected] build
> next build
▲ Next.js 15.3.3
Creating an optimized production build ...
✓ Compiled successfully in 5.2s
✓ Linting and checking validity of types
✓ Collecting page data
Error occurred prerendering page "/dashboard".
Error: getaddrinfo ENOTFOUND api-server
at RequestHandler.execute (/app/.next/server/app/dashboard/page.js:1:445672)
at ClientRequest.emit (node:events:518:28)
at Socket.socketErrorListener (node:_http_client:518:5)
at emitErrorCloseNT (node:internal/streams/destroy:129:3)
at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
Export encountered an error on /dashboard: /, exiting the build.
⨯ Next.js build worker exited with code: 1 and signal: null
Problematic Code
The issue stems from this server component that makes an API call during prerendering:
/* ProductGrid.tsx */
import fetch from 'node-fetch';
import ProductCard from './ProductCard';
import './ProductGrid.css';
interface Product {
title: string,
productId: number
};
export default async function ProductGrid() {
const apiUrl = 'http://api-server:3001';
const result = await fetch(`${apiUrl}/api/products/`); // Fails during CI build
const products: Product[] = await result.json();
return (
<div className='product-container'>
{products.map((product) =>
<ProductCard title={product.title} id={product.productId} key={product.productId}/>
)}
</div>
);
};
What I’ve Tried
I’ve attempted converting this to a client component, moving the fetch call to useEffect, and extracting the API logic into separate functions. Nothing works because the fundamental issue remains - there’s no API server available during the build step in GitHub Actions.
Potential Solutions
I think any of these approaches would fix my issue:
- Mock the API server during GitHub Actions so the fetch succeeds.
- Run both containers together in the CI environment.
- Force this page to skip prerendering completely.
- Disable prerendering for the whole application.
Has anyone dealt with this before? I’m using the App Router if that matters.