Configure Next Js For Images For External Domains [duplicate]

Question

I'm having an issue with next.config.js. I'm currently running a project with next js on typescript. In this project i am working with ThreeJs, @react-three/fiber & @react-three/drei. But I also want to include some images from a specific public YouTube url. In older projects i have implemented this withought having ThreeJs inside like this:

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

}

That being on my next.config.js and it still works like a charm. But when I put it in my current project and try to load an image I get error saying:

Error: Invalid src prop ([url]) on next/image, hostname "img.youtube.com" is not configured under images in your next.config.js

Current next.config.js file

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();

On my component now:

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>
)
}

hqDefault Function:

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

Any help will be appriciated!

Answer 1

You are supposed to export a single configuration object.

First, Install 'next-compose-plugins':

npm install --save next-compose-plugins

Import it:

const withPlugins = require('next-compose-plugins');

And then export your config like this:

module.exports = withPlugins([
    [withTM]
], nextConfig);