I am trying to docker an image for my Node.js Next.js project. However, it seems like the client side cannot resolve the host “backend” to fetch data from the server side.

This is my Dockerfile:

FROM node:latest AS base
RUN apt-get update && apt-get install -y 'ffmpeg'

FROM base AS server
WORKDIR /srv/app
COPY ./server/package*.json ./
RUN npm install
COPY ./server .
RUN npm run build

FROM base AS client
WORKDIR /srv/app
COPY ./client/package*.json ./
RUN npm install
COPY ./client .
ENV NEXT_PUBLIC_API_URL=http://backend:5000
RUN npm run build

FROM base AS production
WORKDIR /srv/app
RUN mkdir /public
COPY --from=server /srv/app/dist ./
COPY --from=client /srv/app/dist ./public
ENV NODE_ENV=production
EXPOSE 5000
CMD ["node", "app.js"]

This is my docker-compose.yml:

version: '3.8'

services:
  backend:
    container_name: pj-backend
    build:
      context: .
      dockerfile: Dockerfile
      target: server
    env_file:
      - ./prod.env
    ports:
      - "5000:5000"
    expose:
      - 5000
    networks:
      - app-network

  frontend:
    container_name: pj-frontend
    build:
      context: .
      dockerfile: Dockerfile
      target: client
    env_file:
      - ./prod.env
    ports:
      - "3000:3000"
    environment:
      - NEXT_PUBLIC_API_URL=http://backend:5000
    networks:
      - app-network
    depends_on:
      - backend

  production:
    container_name: pj-production
    build:
      context: .
      dockerfile: Dockerfile
      target: production
    env_file:
      - ./prod.env
    ports:
      - "5000:5000"
    networks:
      - app-network

networks:
  app-network:
    driver: bridge

This is the error in log console:

[cause]: Error: getaddrinfo ENOTFOUND backend
  at GetAddrInfoReqWrap.onlookupall [as oncomplete] (node:dns:120:26) {
  errno: -3008,
  code: 'ENOTFOUND',
  syscall: 'getaddrinfo',
  hostname: 'backend'
}

Could someone tell me where I did wrong, please?