Tengo un problema con next.config.js. Actualmente estoy ejecutando un proyecto con next js en mecanografiado. En este proyecto estoy trabajando con ThreeJs, @react-three/fiber & @react-three/drei. Pero también quiero incluir algunas imágenes de una URL pública específica de YouTube. En proyectos más antiguos, implementé esto sin tener ThreeJs dentro de esta manera:

 module.exports = { reactStrictMode: true, images: { domains: ['i3.ytimg.com', 'img.youtube.com'], formats: ['image/webp'], },

}

Eso está en mi next.config.js y todavía funciona de maravilla. Pero cuando lo pongo en mi proyecto actual e intento cargar una imagen, aparece un error que dice:

Error: Prop src no válido ([url]) en next/image , el nombre de host "img.youtube.com" no está configurado en las imágenes en su next.config.js

Archivo next.config.js actual

 module.exports = { reactStrictMode: true, images: { domains: ['i3.ytimg.com', 'img.youtube.com'], formats: ['image/webp'], }, } const withTM = require('next-transpile-modules')(['three', '@react-three/fiber', '@react-three/drei']); module.exports = withTM();

En mi componente ahora:

 export default function ProjectCard({ song }: { song: Lyrics }) { const img = hqDefault(song.thumbnailURL); return ( <div> {song.singer} <Image src={img} alt={`${song.singer} ${song.title}`} layout="fill" /> </div> ) }

hqFunción predeterminada:

 export const hqDefault = (url: string): string => { return `https://img.youtube.com/vi/${url}/hqdefault.jpg`; }

¡Cualquier ayuda será apreciada!