The Ultimate Guide to Integrating Cloudinary With Next.js

hey nice guide, thanks for sharing! here’s a quick tip.

\
you only need to specify Cloudinary as an allowed domain (step #5) if you’re going to use the Next Image component.

\
I’d recommend instead using the CldImage component instead from Next Cloudinary since you’re already using Cloudinary, which will:

* avoid duplicate optimization costs
* allow Cloudinary’s CDN-level optimization like delivering Modern formats based on the browser requesting it
* acces to lots of transformations available on the CldImage component, like dynamic cropping and resizing and background removal

\
So if you’re showing the result from CldUploadWidget/CldUploadButton, you could display the image as:

```javascript
<CldImage src={result.public_id} width={result.width} height={result.height} alt="" />
```

\


Colby Fayock