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 yournext.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!
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);