Tengo un montón de svgs provenientes de una respuesta de API, que obtengo dentro useEffect . La respuesta se ve así

 {svg1: 'https://remoteserver.com/assests/svg1.svg', ...and so on}

(Estos svgs no son estáticos y provienen de la carpeta /public . Por lo tanto, no los importo en la parte superior). Quiero representarlos en nextjs usando next/image o la etiqueta <img> normal, pasando la url a src . Sé que next.js por defecto no es compatible con svgs.

 <Image alt='SVG from api' src={response.svg1} width={'45px'} height={'45px'} objectFit='contain' />

De acuerdo con los documentos , esto es posible con dangerouslyAllowSVG , pero aquí existe un riesgo de seguridad, por lo que no quiero seguir esta ruta. Sé que hay paquetes como SVGR y babel-inline-svg para resolver el problema, pero son para usar svgs como componentes de reacción. También probé next-images y withImages dentro de next.config.js .

 const withImages = require('next-images') module.exports = withImages({ reactStrictMode: true, env: { BASE_URL: process.env.BASE_URL }, images: { domains: ['remoteserver.com', 'remoteserver2.com'] }, webpack(config, options) { return config } })

Pero la compilación falla cuando intento next build .

 ./static/images/Logo.png TypeError: unsupported file type: undefined (file: undefined)

¿Qué me estoy perdiendo/haciendo mal aquí? ¿Hay alguna solución alternativa?