Can't send request to docker container in nextjs getStaticProps?

I'm trying to send a simple GET request from my Next.js getStaticProps function to another container which is a node backend api using docker-compose.

This is my docker-compose file:

version: "3"
services:
  web:
    build: ./backend
    volumes:
      - ./backend:/home/node/app/
    ports:
      - "3001:3001"
  frontend:
    build: ./frontend
    volumes:
      - ./frontend:/home/node/app/
    ports:
      - "3000:3000"
    depends_on:
      - "web"

Index.js in Next.js:

export const getStaticProps = async (context) => {
  const { data } = await axios({ method: "GET", url: "http://web:3001" })

  return {
    props: {
      data: data.message,
    },
  }
}

What I'm doing wrong?

I connected my other non Next.js apps with the same url http://web:3001 and they work just fine. why can't I build my next.js app?