We have a codebase where the vast majority of images are using next/legacy/image, for which we use a global Cloudinary loader.

Here is next.config.js:

images: {
  loader: 'cloudinary',
  path: 'https://res.cloudinary.com/XXX',
  domains: ['res.cloudinary.com', 'XXX.cloudfront.net'],
  formats: ['image/webp'],
},

It feels like there is not a great path forward to start using next/image, while still supporting next/legacy/image, unless I'm missing something?

If I leave the global loader in next.config.js, it affects the loading of images in our new next/image based component.

If I remove the global loader in next.config.js, it breaks all the instances of next/legacy/image.

What's the recommended approach here?

Can I add an inline loader to our image component that wraps next/legacy/image, instead of a global loader?