Alojo una aplicación next.js dentro de la estructura de archivos de un sitio web principal, quiero que CSS dentro de la aplicación use imágenes ubicadas fuera de la estructura de archivos de las aplicaciones pero dentro de la estructura de archivos de los sitios web principales.

Ejemplo de estructura de archivo:

 |- /nextjs_app/styles/global.css |- /media/background.jpg

global.css:

 BODY { background-image: url(/media/background.jpg); }

Cuando alojo la aplicación de forma estática, esto funciona; sin embargo, cuando ejecuto next.js localmente, la aplicación no reconoce la ruta de la imagen y devuelve un 404 no encontrado:

 GET http://localhost:3000/media/background.jpg 404 (Not Found)

Los archivos fuera de la estructura de la aplicación no parecen ser accesibles en el puerto localhost 3000 (donde se ejecuta el siguiente js)

También ejecuto MAMP en el puerto localhost 80, si cambio la ruta del archivo en global.css a una URL absoluta que apunta a este puerto, todo funciona, así:

 BODY { background-image: url(http://localhost:80/media/background.jpg); }

Sin embargo, cuando construyo una copia estática de la aplicación, tengo que eliminar manualmente la parte 'http://localhost:80' de la ruta para cada imagen dentro de global.css.

Me he metido con los redireccionamientos dentro de next.config.js, pero los redireccionamientos no parecen aplicarse a las rutas de imágenes css, solo a las páginas dentro de la aplicación. ¿O lo estoy haciendo mal? Aquí hay una copia de next.config.js con redireccionamientos para cualquier cosa que apunte a /media/:

 module.exports = { async redirects() { return [ { source: '/media/:path*', destination: 'http://localhost:80/media/:path*', permanent: true, }, ] }, }

Podría alojar las imágenes dentro de la siguiente carpeta js /public/, sin embargo, quiero evitar esto ya que el sitio web principal requiere que estas imágenes estén ubicadas fuera de la aplicación.

He buscado en la web respuestas a esto sin suerte, si alguien puede ayudar, se lo agradecería mucho :-)