Why does NEXT JS throw FetchError when using SSR?

Question

React

next js packaged in Docker

frontend:
    build: ./frontend
  nginx:
    build: ./nginx
    volumes:
      - ./backend/static:/backend/static
      - ./backend/media:/backend/media
    ports:
      - 80:80

SSR

export async function getServerSideProps() {
  const response = await fetch(`${process.env.API_URL}/categories/`);
  const categories = await response.json();
  return {
    props: { categories },
  };
}

On pages using ssr, it gives an error FetchError: request to localhost/api/categories failed, reason: connect ECONNREFUSED 127.0.0.1:80
I believe this is due to the use of fetch in the request and docker.

Answer 1

https://nextjs.org/docs/basic-features/data-fetch...

Note: You should not use fetch() to call an API route in getServerSideProps. Instead, directly import the logic used inside your API route. You may need to slightly refactor your code for this approach.
Fetching from an external API is fine!

This applies to any get*Props