Cannot fetch strapi data when using next.js getStaticProps

I'm trying to display content from strapi on a next.js app which is statically generated.

I run both strapi & next.js on localhost (strapi on localhost:1337, next.js on localhost:4200) and I have disabled cors on strapi.

 {
    name: 'strapi::cors',
    config: {
      enabled: false,
      origin: ['*'],
      methods: ['GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'HEAD', 'OPTIONS'],
      headers: '*'
    },
  },

When I try to fetch data from getStaticProps I receive an error:

cause: Error: connect ECONNREFUSED ::1:1337
      at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1300:16) {
    errno: -61,
    code: 'ECONNREFUSED',
    syscall: 'connect',
    address: '::1',
    port: 1337
  }

export async function getStaticProps() {
  try {
    const res = await fetch('http://localhost:1337/api/pages/2');
    const pages = await res.json();

    return {
      props: { title: pages.data.attributes.title },
    };
  } catch (err) {
    return { props: { title: 'failed' } };
  }
}

The interesting part is that if I use the same fetching mechanism inside a hook it works:

useEffect(() => {
   getStaticProps();
 }, []);

Does anybody have an ideea on why will this happen?

Change the request(fetch) url to 127.0.0.1 instead of localhost.