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
[ Ссылка ]
⚙️ Demo Code
[ Ссылка ]
Support my work by using my referral link to sign up for Cloudinary!
[ Ссылка ]
🔔 Subscribe for more tech and developer videos
[ Ссылка ]
🐦 Get updates straight to your Twitter @colbyfayock
[ Ссылка ]
📸 Catch the next stream live on Twitch @colbyfayock
[ Ссылка ]
✉️ Or a newsletter right to your inbox!
[ Ссылка ]
💝 Sponsor me for more free content like this!
[ Ссылка ]
👨🚀 Brought to by colbyfayock.com
[ Ссылка ]
🎥 Want to know what A/V equipment I use?
[ Ссылка ]
🧰 More Resources
Cloudinary
[ Ссылка ]
Cloudinary Build URL
[ Ссылка ]
🎼 Music
Music from Uppbeat (free for Creators!):
[ Ссылка ]
License code: RDJHVTXRQKXKSYZI
#colbyfayock #cloudinary #nextjs #webdevelopment
