I have an NextJS website running on a Windows Server on port 3000. I’ve setted the URL Rewrite to redirect all the requests to port 3000 on the server and everything works fine, the Frontend works correctly. Now I’m trying to integrate the Node/Express Backend running on port 3001 to accept fetches from the Frontend.

My current web.config is:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <handlers>
      <add name="iisnode" path="server.js" verb="*" modules="iisnode" />
    </handlers>
    <rewrite>
      <rules>
        <rule name="API" stopProcessing="true">
          <match url="^api/(.*)" />
          <action type="Rewrite" url="http://localhost:3001/api/{R:1}" />
          </rule>
        <rule name="myapp" stopProcessing="true">
          <match url="(.*)" />
          <conditions>
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            </conditions>
          <action type="Rewrite" url="server.js" />
          </rule>
        </rules>
    </rewrite>
    <security>
      <requestFiltering removeServerHeader="true" />
    </security>
  </system.webServer>
</configuration>

And my next.config.mjs:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false,
  async rewrites() {
    return [
      {
        source: '/api/users/:path*',
        destination: 'http://localhost:3001/api/api/users/:path*',
      },
      {
        source: '/api/status/:path*',
        destination: 'http://localhost:3001/api/status/:path*',
      },
    ];
  },
  env: {
    API: "https://myurl.com"
  }
};

export default nextConfig;

Acessing https://myurl.com/api/users/id/30, for example, directly in the browser returns Cannot GET /api/api/users/id/30. Fetching data from the frontend doesnt work either, with status code 404. What’s the proper way to redirect the api calls to the backend?