javascriptnext.jsfetchnext.js15

Why does a Next.js 15 Fetch URL in production on Fly.io change?


When fetching a post on a production next.js 15 hosted on Fly.io the URL that place in the fetch is changing & causing a 404 not found;

The request URL in the network tab of the Chrome dev tools is:

https://www.rleaguez.com/organizationz/www.rleaguez.com/api/v2/organization

In console log I log out the URL I am using and it’s:

https:www.rleaguez.com/api/v2/organization

The fetch code I am using is:

  const postUrl = 'https:www.rleaguez.com/api/v2/organization';
  console.log("🚀 ~ CreateOrg ~ postUrl:", postUrl)
  const orgResponse = await fetch(
    postUrl,
    {
      method: 'POST',
      headers: {
        'content-type': 'application/json',
      },
      body: JSON.stringify(data),
    },
  );

If the URL is hardcoded such as the code block below the post is successful:

  const orgResponse = await fetch(
    // hardcoded url below is successful
    ‘https://www.rleaguez.com/api/v2/organization’,
    {
      method: 'POST',
      headers: {
        'content-type': 'application/json',
      },
      body: JSON.stringify(data),
    },
  );

Why does the URL change in production and does not stay the same as what I place in the code?


Solution

  • I greatly appreciate Jabaa's assitance explaining the URL was not valid as it was missing the // after the https: in the URL;

    After updating the URL to

    const postUrl = 'https://www.rleaguez.com/api/v2/organization';
    

    from

    const postUrl = 'https:www.rleaguez.com/api/v2/organization';
    

    that corrected the issue; I guess since it was an invalid URL then the post url was changed to use the page I was on to prefice the posting url.