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 sunext.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!
Se supone que debe exportar un solo objeto de configuración.
Primero, instale 'next-compose-plugins':
npm install --save next-compose-pluginsImportarlo:
const withPlugins = require('next-compose-plugins');Y luego exporte su configuración de esta manera:
module.exports = withPlugins([ [withTM] ], nextConfig);