Next.js Image Component with Cloudinary (Next.js 12 and below) - Dev Hints

Get the best of Cloudinary while using the Next.js Image Component. Learn how to add Cloudinary URLs to the list of allowed domains for the Image component and use the built-in Next.js Cloudinary loader to take advantage of more Cloudinary features.
⚠️ Update: Next Cloudinary now available for a full-featured Cloudinary integration in Next.js
next-cloudinar...
Or learn how with: • Automatic Image Optimi...
🚨 Warning: Next.js 13 deprecated global loaders which prevents this method from working. Try Next Cloudinary for a full-featured integration using the link above or use one of the code examples below to see how to integrate with Next.js 13.
💾 Using Cloudinary URLs
github.com/col...
💾 Using the Cloudinary Loader
github.com/col...
Instructor: Colby Fayock (‪@colbyfayock‬)
--
Cloudinary helps developers build performant experiences for the web with powerful optimization and transformation APIs.
🚀 Get started with a free account!
cld.media/devh...
#cloudinary #devhints #nextjs #images #webdevelopment

[@Quick_Code]

But If we are also using the images from other drives then what we need to do?

[@colbyfayock]

what kind of locations are you referring to by "other drives"? are you looking to use Next Image for more external services than Cloudinary?

[@z1982_]

Thank you for the tips!
But at the end, is it faster than render images through Next ?

[@colbyfayock]

it's going to depend a bit about the image between things like the dimensions and file sizes so its hard to give a yes or no answer. there are a few factors that come into play like encoding time and the optimization strength, where optimization strength for instance, we recommend using an automatic setting that looks to both optimize as much as it can without negatively impacting the visual quality, as well as auto format detection, which will deliver the best format for the image based on the browser/device

[@Cloudinary]

Want more out of Cloudinary in Next.js? Use the CldImage component with Next Cloudinary: next-cloudinary.spacejelly.dev/
🚨 Warning: Next.js 13 deprecated global loaders which prevents this method from working. Try Next Cloudinary for a full-featured integration using the link above or use one of the code examples in the description.
Learn how with: czcams.com/video/oj2-BcZ8szk/video.html

[@ochudi]

Hi! Next14 has deprecated domains in the config, how do we resolve this using usePattern? The docs aren't explicit for me; and I haven't seen any video online about it.