I have two Nextjs applications:

1_ webapp - Hybrid

2_ blog - static (exported with next export)

They are deployed separately.

I want to link the webapp to the external blog app. When user click on "blog" in the webapp, should land on the blog static app. To do so, I'm trying to use Nextjs rewrites.

In my webapp in next.config.js I do:

      async rewrites() {
        return [
          {
            source: '/blog',
            destination: 'https://myblog.azurestaticapps.net/blog',
          },
        ]
      },

Then in the blog app in next.config.js I do:

    const baseUrl = '/blog';
    
    module.exports = withBundleAnalyzer({
      poweredByHeader: false,
      trailingSlash: true,
      basePath: baseUrl,
      assetPrefix: baseUrl,
    });

The problem is:

• When I deploy the blog app on azure static web app, index.html (homepage of my blog app) is reachable under https://myblog.azurestaticapps.net and not under https://myblog.azurestaticapps.net/blog which means that the css and js are not loaded

Example of js request in blog-app/index.html: /blog/_next/static/chunks/main-d3b8bc8211fdf94f30b0.js

Can have a look here: https://purple-coast-094447810.azurestaticapps.net/

I read about exportPathMap in Nextjs and tried to use it but in my build folder I get

• index.html in my root folder
• /blog folder in my root which is empty. No files inside at all. That's how I use it:

    module.exports = withBundleAnalyzer({
      poweredByHeader: false,
      trailingSlash: true,
      basePath: baseUrl,
      assetPrefix: baseUrl,
      env: {
        baseUrl: baseUrl,
      },
      exportPathMap: async function (
        defaultPathMap,
        { dev, dir, outDir, distDir, buildId }
      ) {
        return {
          '/blog': { page: '/' },
        }
      },
    });

I'm aware of this example from Nextjs - with zones: https://github.com/vercel/next.js/tree/canary/examples/with-zones but that is made for the dynamic app, not statically exported.