Next.js Image with Cloudinary - Blurred Placeholder Images Tutorial
Vložit
- čas přidán 27. 07. 2024
- 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
spacejelly.dev/posts/how-to-u...
⚙️ Demo Code
github.com/colbyfayock/my-nex...
Support my work by using my referral link to sign up for Cloudinary!
cloudinary.com/users/register...
🔔 Subscribe for more tech and developer videos
czcams.com/users/colbyfayock?s...
🐦 Get updates straight to your Twitter @colbyfayock
/ colbyfayock
📸 Catch the next stream live on Twitch @colbyfayock
/ colbyfayock
✉️ Or a newsletter right to your inbox!
www.colbyfayock.com/newsletter/
💝 Sponsor me for more free content like this!
github.com/sponsors/colbyfayock
👨🚀 Brought to by colbyfayock.com
www.colbyfayock.com
🎥 Want to know what A/V equipment I use?
www.colbyfayock.com/what-i-use
🧰 More Resources
Cloudinary
cloudinary.com/users/register...
Cloudinary Build URL
cloudinary-build-url.netlify....
🎼 Music
Music from Uppbeat (free for Creators!):
uppbeat.io/t/sensho/tribe
License code: RDJHVTXRQKXKSYZI
#colbyfayock #cloudinary #nextjs #webdevelopment - Věda a technologie
![13 Null в Java и Kotlin [Java Kotlin с нуля]](http://i.ytimg.com/vi/JBhVClEQmPs/mqdefault.jpg)
Get fresh tutorials and other free content straight to your inbox! colbyfayock.com/news
Underrated channel, I hope you blow up! Love the Nextjs tutorials, keep it up!
thank you 🙏
Loving all of Next.js contents! Thanks and keep going!
thank you! 🙌
Love Love LOVE!!!
thanks James
Amazing video! Easy to understand, straight to the point. Keep it up!
thank you Martín!
Hey Colby, thanks for creating this tutorial! Very well structured and I love this stack. +1 sub
thank you!
You got a great voice for teaching, thanks for this tutorial
thanks, i appreciate the kind words!
This guy is crazy! Loving all the videos keep up the good work ly
thank you!
Great video. FYI, you could also simulate a 3G connection in Chrome dev tools to better show the placeholder effect.
ah great point, thanks!
Thanks....🤩
no problem! 🙌
thank you
You're welcome 🙌
Hi Colby... thank you for the video, great as always... I'm wondering why didn't you set the throttling in the network tab of dev tools to slow network, instead of simulate the delay...
that... is a great question! didn't think about that as i was making the video haha. ive been meaning to make some videos about dev tools too!
Thanks man. I amy trying it from 10 hour but can't do it. your video help me to do that in 10 minutes. Take love ❤❤❤
no problem ♥️
masterclass
thanks 🙏
Great tutorial - really appreciate it.
Am I right in thinking that the paddingTop ratio only works because the {styles.card} is providing width and height? In a blog post for example, the paddingTop % will be relative to the entire page.
if im not mistaken the padding top is relative to the parent, so when you set width to 100% and height to 0 then using a % for the padding top based on the ratio you want to use, it will basically take the current width into consideration when building that ratio to give you a height!
Thanks for the tutorial. How would this work if you're using the /fetch/ method for cloudinary?
im actually not totally sure what the difference is. would fetch happen in the browser or something?
Hi Colby - is there anywhere that describes the benefits of using next/image with Cloudinary? They seem to have overlapping functions (e.g. resizing and compression). Also are there places not to use next/image? e.g. on a locally stored svg icon that doesn't need to compressed or responsively sized. A best practice guide would be great for these topics.
hey good question! I don't have anything comprehensive, but you're right, there is definitely a little bit of cross-over. beyond the crossover though Cloudinary provides a ton of out-of-the-box features on top of that like transformations, overlays, and such. but yeah a best practice guide would definitely be a great idea to put together
@@colbyfayock it would be a great white paper or podcast. I have an example image heavy travel site if you need (with Strapi)! Its not that one is better than the other. It just how best to effectively use both together. I feel there are a lot of developers don't know when to use Cloudinary, next/image and img - my pseudo technical viewpoint is there needs guidelines to achieve code simplicity and highest performance.
@@stillonholliday yeah absolutely. its definitely a good talking point in the Next.js X Cloudinary integration world. the Next.js Image component does a lot of great stuff when you're not dealing with Cloudianry but I personally use Cloudinary URLs directly as at that point, you're somewhat mixing and doubling the work
for instance, a simple with auto optimization and auto formatting will provide all the necessary benefits backed by Cloudinarys extensive CDN, then on top, you get a ton of additional options, so it becomes unnecessary to use the Next.js Image component unless you're trying to take advantage of other features
i think though we as cloudinary can do a better job at providing more of those options, ive been considering how i can improve the Next.js / Cloudinary integration, such as a custom loader that provides more capabilities than the baked-in cloudinary loader, but thats a separate topic
are you able to mention the site you work on? just curious :) but undersatnd if you can't publicly
Thats a neat trick with the aspect ratio sizing, i've used that in the past and is a real time saver however you can do that natively with css web.dev/aspect-ratio/
nice! thanks ill have to check that out
I have no idea why u have so much low subs and views! Thats so unfair! Thx for all your work! I have a question about Image! Do images are statically generated at build time so on production u see them immediately and not take time to load on view for a bad experience? Ty in advance !
thanks for the kind words :) the first time images from Cloudinary are loaded they'll have a bit of processing time, but every time after they're served from cache (unless the cache is cleared). you can alternatively use transformations on upload: cloudinary.com/documentation/transformations_on_upload
cool man, please add how to upload images to cloudinary with nextjs :)
nice idea! do you mean like an upload form where someone can select an image then upload it?
@@colbyfayock yes, that's what I mean, thanks 😊
Hey just wanted to confirm does Cloudinary work with "build": "next build && next export" in json file?
hey! with my tutorial "as is" you wouldn't be able to do it as Next.js requires Next Image at request time. there may be options for creating a custom loader to do this though
@@colbyfayock can't we use a normal html img tag in nextjs or is it necessary to use image optimization !? Because my project is SSG based so have probelm with next/img and I don't want to use any image loader.
@@sakshighule_ Next.js Image component is completely optional!! feel free to use the standard
@@colbyfayock so the html component won't give me problem even if I have "build": "next build && next export". And also Can i use images from the public folder using normal img tag right that won't give me problem while deploying later?
@@sakshighule_ correct! if you had an image in /public/image.jpg, you would do and it should work perfectly
Hi
How to show img when is in src folder, with relative path?
have you tried importing it? import myImage from '../path' then set the image source as that
you might need this: github.com/twopluszero/next-images
@@colbyfayock yes that's it. Yes I try import. Now working with require
Nice 👍
I'm getting a 404... if i put in full url, all is ok but get a 404 if I just parse the filename. Maybe I missed something. Wouldn't I have to set the Cloud address somewhere in the code to reference?
Never mind. Image was in a sub directory on cloudinary. Works.
But I'm going to want to automate the page population of images, which I did on the site I built a couple of years ago. Not sure how I can implement that script in Next.jS. Basically i will want to fill a directory with a bunch of images and the script would read that directory and populate the page with all its content.
this is cool, but one thing that bothers me, is now that the image name is dynamic, that won't work for me when I want to automatically populate a page of the entire directory contents of images. I don't want to have to key in 30+ image sources. Current site my client has, this feature is incorporated, but it's old 2016 web tech.
@@BarryDocherty RE: listing images, check this out: czcams.com/video/XJWdLbw3QjY/video.html
Hello @@BarryDocherty ,
I am also getting this error & my images are there in the Sub Directory on Cloudinary. I have been searching for the resolution since an hour now & couldn't find any. Could you please share the solution?
what about the place holder blur data URL props...?
The challenging thing about the blurred placeholder is you need to pass in the data URI. That's not something you'd want to do in tbe client. With react server components there are potential options for that that make it easier. In previous next versions you could build those in your data fetching method but it's not as straightforward. There's a library called blurhash that works well for that. You can use cloudinary but blurhash is a great option without the network request
@@colbyfayock thanks a lot very interesting. Why not doing it in the client? At the end, we are not revealing any kind of API key or something right ?
@@z1982_ if the image is a remote file, youd have to download it in the client, then transform it to a blurred version, which defeats the purpose. if it's a local file, imt not sure if that would be performant or if you would have much luck doing it with browser APIs
@@colbyfayock thanks a lot, I got your point on the useless additional transformation. However, when used with an image provider that offers url based transformation API like cloudinary you can request a much smaller version of your asset to be blurred and a proper version as a src
What do you think?
@@z1982_ definitely! But as far as i know, the newer API for the Next.js Image component doesn't support using URLs, you must pass data URLs nextjs.org/docs/pages/api-reference/components/image#blurdataurl
So basically there is no option for wildcard permission for random domain names in some case we add a random image source in database and load it in nextjs app , so we can't do that again we have to add those image domain in config file and build it
Like insted of array they should allow us to use * 😝
ah yeah that's a bummer, i haven't ran into that situation yet, seems like something that they should support. have you tried making an issue on their repo?