I have hosted my next.js application on Azure SWA with authentication.

Route which is failing - www.example.com/blog/[id]
Routes which do not include params work fine on refresh. But routes which include params ([id]) throws Azure Default 404: Not Found page.

Here are my files:
"next.config.js"

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: "export",
};

module.exports = nextConfig;

"staticwebapp.config.json"

{
  "platform": {
    "apiRuntime": "node:18"
  },
  "routes": [
    {
      "route": "/login",
      "rewrite": "/.auth/login/aad"
    },
    {
      "route": "/.auth/login/github",
      "statusCode": 404
    },
    {
      "route": "/.auth/login/twitter",
      "statusCode": 404
    },
    {
      "route": "/logout",
      "redirect": "/.auth/logout"
    },
    {
      "route": "/*",
      "allowedRoles": ["authenticated"]
    }
  ],
  "auth": {
    "identityProviders": {
      "azureActiveDirectory": {
        "registration": {
          "openIdIssuer": "https://login.microsoftonline.com/8d894c2b-238f-490b-8dd1-d93898c5bf83/v2.0",
          "clientIdSettingName": "AZURE_CLIENT_ID",
          "clientSecretSettingName": "AZURE_CLIENT_SECRET"
        }
      }
    }
  },
  "responseOverrides": {
    "401": {
      "redirect": "/login",
      "statusCode": 302
    }
  },
  "mimeTypes": {
    ".json": "text/json",
    ".csv": "text/csv"
  }
}

Solutions tried:

// This method did not work, it redirected to homepage. 
{
    "navigationFallback": {
        "rewrite": "/index.html",
        "exclude": ["/js/*.{js,map}", "/img/*.{png,jpg,gif}", "/css/*"]
    }
}