Learn how to create blurred placeholder images for a great loading user experience with Cloudinary and the Next.js Image component.

🧐 What’s Inside

• 00:00 - Intro to Next.js Image with Cloudinary
• 00:09 - The tools we’ll use like Next.js, next/image, and Cloudinary
• 00:45 - Creating a new React app with Create Next App
• 01:18 - Adding a local image with the Next.js Image component
• 03:32 - Using and configuring static Cloudinary image URLs with the Next.js Image component and next.config.js
• 05:02 - Creating dynamic Cloudinary image URLs with Cloudinary Build URL
• 08:28 - Adding a blurred background placeholder loading image with Cloudinary transformations in Next.js
• 12:32 - Artificially delaying image load to see how the placeholder loading image works with useState, useEffect, and setTimeout
• 15:12 - Outro

🗒️ Read More
https://spacejelly.dev/posts/how-to-use-cloudinary-images-in-next-js-with-blurred-placeholders/

Support my work by using my referral link to sign up for Cloudinary!
https://cloudinary.com/invites/lpov9zyyucivvxsnalc5/otnujhc8dm7tqbcljcvn?kind=youtube&t=started

#next #react #javascript #web-development