Tengo dos aplicaciones Nextjs:

1_ aplicación web - Híbrido

2_ blog - estático (exportado con la próxima exportación)

Se implementan por separado.

Quiero vincular la aplicación web a la aplicación de blog externa. Cuando el usuario hace clic en "blog" en la aplicación web, debe aterrizar en la aplicación estática del blog. Para hacerlo, estoy tratando de usar las reescrituras de Nextjs.

En mi aplicación web en next.config.js hago:

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

Luego, en la aplicación de blog en next.config.js hago:

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

El problema es:

• Cuando implemento la aplicación de blog en la aplicación web estática de Azure, se puede acceder a index.html (página de inicio de mi aplicación de blog) en https://myblog.azurestaticapps.net y no en https://myblog.azurestaticapps.net/blog , lo que significa que no se cargan los css y js

Ejemplo de solicitud js en blog-app/index.html: /blog/_next/static/chunks/main-d3b8bc8211fdf94f30b0.js

Puede echar un vistazo aquí: https://purple-coast-094447810.azurestaticapps.net/

Leí sobre exportPathMap en Nextjs e intenté usarlo, pero en mi carpeta de compilación obtengo

• index.html en mi carpeta raíz
• /blog carpeta en mi raíz que está vacía. No hay archivos dentro en absoluto. Así es como lo uso:

 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: '/' }, } }, });

Conozco este ejemplo de Nextjs, con zonas: https://github.com/vercel/next.js/tree/canary/examples/with-zones pero está hecho para la aplicación dinámica, no exportado estáticamente.