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

Support my work by using my referral link to sign up for Cloudinary!

#next #react #javascript #web-development

Next.js Image with Cloudinary - Blurred Placeholder Images Tutorial
4.75 GEEK