NextJS Docker build fails: fetch failed ECONNREFUSED

Question

Docker-compose.yaml:

version: "3.9"
services:
  postgres:
    image: postgres
    environment:
      - POSTGRES_HOST=postgres
      - POSTGRES_PASSWORD=password
      - POSTGRES_USER=Test
      - POSTGRES_DB=Test
    ports:
      - "5432:5432"

  backend:
    build: ./server
    container_name: server
    ports:
      - "3001:3001"
    environment:
      - PORT=3001
      - HOST=postgres
      - DB_PORT=5432
      - DB_USER=Test
      - DB_PASSWORD=password
      - DB_NAME=Test
    volumes:
      - ./server:/app/server
      - /app/server/node_modules
    depends_on:
      - postgres

  frontend:
    build: ./client
    container_name: client
    ports:
      - "3000:3000"
    environment:
      - NEXT_PUBLIC_API_URL=http://localhost:3001
    volumes:
      - ./client:/app/client
      - /app/client/node_modules
      - /app/client/.next
    depends_on:
      - backend

Nextjs project dockerfile:

FROM node:21

WORKDIR /app/client

COPY package.json ./
COPY yarn.lock ./

RUN yarn install

COPY . .

RUN yarn build 

COPY .next ./app/client/.next

CMD ["yarn", "start"]

Metrics Page:

import { Button } from "@/components/ui/button"
import { TrashIcon } from "lucide-react"
import { revalidatePath } from "next/cache"
import MetricForm from "../components/metric-form"

async function getMetrics() {
    const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/metrics`, {
        cache: "no-cache",
    })
    return response.json()
}

async function deleteMetric(metricID: FormData) {
    "use server"
    const metricId = metricID.get("metric_id")

    await fetch(`${process.env.NEXT_PUBLIC_API_URL}}/${metricId}`, {
        method: "DELETE",
    })

    revalidatePath("/metrics")
}

export default async function Metrics() {
    const metrics = await getMetrics()

    return (
        <main>
            <div className="flex flex-row justify-between my-5">
                <h1 className="text-3xl text-gray-700 font-semibold">Metrics</h1>
                <MetricForm mode="add" buttonName="Add New Metric" title="Add New Metric" />
            </div>
            <div>
                <table className="min-w-full">
                    <thead>
                        <tr className="bg-gray-200">
                            <th>Metric ID</th>
                            <th>Type</th>
                            <th>Description</th>
                            <th>Edit</th>
                            <th>Delete</th>
                        </tr>
                    </thead>
                    <tbody className="bg-white divide-y divide-gray-200">
                        {metrics.map((metric: any) => (
                            <tr key={metric.metric_id}>
                                <td>{metric.metric_id}</td>
                                <td>{metric.type}</td>
                                <td>{metric.description}</td>
                                <td>
                                    <MetricForm
                                        mode="edit"
                                        buttonName="Edit Metric"
                                        title="Edit Metric"
                                        metricData={metric}
                                    />
                                </td>
                                <td>
                                    <form action={deleteMetric}>
                                        <input type="hidden" name="metric_id" value={metric.metric_id} />
                                        <Button variant="ghost" size="sm" className="text-slate-500">
                                            <TrashIcon size={16} />
                                        </Button>
                                    </form>
                                </td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>
        </main>
    )
}

ERROR:

24.93 TypeError: fetch failed
24.93     at node:internal/deps/undici/undici:13737:13
24.93     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
24.93     at async globalThis.fetch (/app/client/.next/server/chunks/735.js:1:156107)
24.93     at async ea (/app/client/.next/server/app/metrics/page.js:21:825)
24.93     at async es (/app/client/.next/server/app/metrics/page.js:21:1126) {
24.93   [cause]: Error: connect ECONNREFUSED 127.0.0.1:3001
24.93       at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1605:16)
24.93       at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
24.93     errno: -111,
24.93     code: 'ECONNREFUSED',
24.93     syscall: 'connect',
24.93     address: '127.0.0.1',
24.93     port: 3001
24.93   }
24.93 }
24.93 TypeError: fetch failed
24.93     at node:internal/deps/undici/undici:13737:13
24.93     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
24.93     at async globalThis.fetch (/app/client/.next/server/chunks/735.js:1:156107)
24.93     at async ea (/app/client/.next/server/app/metrics/page.js:21:825)
24.93     at async es (/app/client/.next/server/app/metrics/page.js:21:1126) {
24.93   [cause]: Error: connect ECONNREFUSED 127.0.0.1:3001
24.93       at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1605:16)
24.93       at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
24.93     errno: -111,
24.93     code: 'ECONNREFUSED',
24.93     syscall: 'connect',
24.93     address: '127.0.0.1',
24.93     port: 3001
24.93   }
24.93 }
24.93 
24.93 Error occurred prerendering page "/metrics". Read more: https://nextjs.org/docs/messages/prerender-error
24.93 
24.93 TypeError: fetch failed
24.93     at node:internal/deps/undici/undici:13737:13
24.93     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
24.93     at async globalThis.fetch (/app/client/.next/server/chunks/735.js:1:156107)
24.93     at async ea (/app/client/.next/server/app/metrics/page.js:21:825)
24.93     at async es (/app/client/.next/server/app/metrics/page.js:21:1126)

Hello,

When I try and run docker-compose up I get the error above when yarn build, I assumed with depends_on being backend, frontend won't run until backend is running.

If I have the api running before running the command yarn build it builds fine without any problem. How can I fix this?