As the second step of the upgrade, I had to deal with two errors related to the next/image component. Let's tackle them by order of appearance:
1. External images in next.config.js
The images.domains configuration is deprecated. Please use images.remotePatterns configuration instead.
In NextJS 12, when you used images hosted on a third-party server or a headless CMS (GpaphCMS in my case), in order to use them with next/image component, you had to declare the domain name they're hosted on by indicating it in the next.config.js file.
The pattern was
module.exports = {
images: {
domains: ['media.graphassets.com'],
},
} In NextJS 14, image.domains configuration doesn't work anymore and the new structure requires image.remotePatterns usage as follows:
module.exports = {
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 's3.amazonaws.com',
port: '',
pathname: '/my-bucket/**',
},
],
},
} 2. Deprecated objectFit
Image with src "https://media.***.com/***" has legacy prop "objectFit". Did you forget to run the codemod?
<Image
src={project.coverImage.url}
height={project.coverImage.height}
width={project.coverImage.width}
objectFit='cover'
className='absolute'
alt={project.title}
/>Before NextJS 13, you could have objectFit parameter in the <Image> component. It is now obsolete and you have to move it to the CSS Style. In my case, I just did it by adding an object-cover to the className of the tag, as I use TailwindCSS.
<Image
src={project.coverImage.url}
height={project.coverImage.height}
width={project.coverImage.width}
className='absolute object-cover'
alt={project.title}
/>And that was basically all I had to deal with while bringing my Image Optimisation up to date.