NextJS website hosted on Azure as a Static Web App gets 405 error when accessing /API/* routes

Question

When running my nextjs app locally I can call /api/foo.js from the nextjs app itself successfully. However once hosted on Azure as a Static Web App it returns a 405 Method Not Allowed error.

I wonder if this is to do with /api expecting to be used for microservices such as Azure Functions? I am considering creating a staticwebapp.config.json such as follows, but wonder if there is a better way?

    {
  "routes": [
    {
      "route": "/api/*",
      "allowedMethods": ["GET", "POST"],
      "serve": "/api/index.html",
      "statusCode": 200
    }
  ],
  "navigationFallback": {
    "rewrite": "index.html",
    "exclude": ["/images/*.{png,jpg,gif}", "/css/*", "/api/*"]
  },
  "responseOverrides": {
    "404": {
      "rewrite": "/404.html",
      "statusCode": 404
    }
  }
}