Next.js Image Optimization & Dynamic Cropping with Cloudinary - Dev Hints

[@EmilyNilsen]

Thank you, Colby! I've now implemented the CldImage tag on my images, and the transformations work as shown. The only transformation I couldn't use was zoompan="loop" (it resulted in an error fetching the image). I look forward to your next videos!

[@colbyfayock]

if you have a moment, could you share the error that you got or the URL so I can try to debug?

[@EmilyNilsen]

@@colbyfayock Can I email you my github repository? I've started a new project and am trying to use CldImage again without success. It's most likely a stupid error by me

[@colbyfayock]

@@EmilyNilsen replied in the email :)

[@robinferrari6963]

Nice work Colby ! Is it possible to activate the blurred image on loading with next-cloudinary, as you demonstrate in a previous video without the next-cloudinary library?

[@colbyfayock]

hey! the tricky thing with that is Next.js requires the blurred placeholder to be a data URI, which makes sense, but that makes it challenging for how to achieve that while considering support for both Pages Router and App Router usage. with React Server Components, I can make that request to build that image and inject it in (id need to test that performance), but wouldn't make sense to do that clientside figuring out a solution is still in the back of my head, but im open to ideas. if you think of anything would love to see you comment in a discussion here: github.com/colbyfayock/next-cloudinary/discussions

[@wujekbizon1]

Hey Colby , nice work but where I can find next-cloudinary Typescript types ?

[@colbyfayock]

Edit: Typescript support is now available! ~currently not supported, but its something i want to add! i have to learn typescript first :)~

[@colbyfayock]

just a quick update, TS support is available!

[@HassanElMghari]

Nice work Colby!

[@colbyfayock]

thank you! 🙏