How to Use the Next.js blurDataUrl Images Prop with Plaiceholder

Рет қаралды 18,594

Күн бұрын

Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
Learn how to use the Next.js blurDataUrl images prop with Plaiceholder. In this tutorial, we'll learn what the blurDataUrl prop is for and how it works with the placeholder prop and the recommended Plaiceholder dependency.
💖 Support me on Patreon ➜ / davegray
⭐ Become a full-stack web dev with Zero To Mastery Courses:
- Complete Next.js Developer: bit.ly/CompNextJSDev
- Advanced React: bit.ly/AdvReactDev
- Junior to Senior Dev Roadmap: bit.ly/WebDevRoadmap-JrtoSr
🚩 Subscribe ➜ bit.ly/3nGHmNn
📬 Course Updates ➜ courses.davegray.codes/
❓ Questions - Please post them to my Discord ➜ / discord
☕ Buy Me A Coffee ➜ www.buymeacoffee.com/davegray
👇 Follow Me On Social Media:
GitHub: github.com/gitdagray
Twitter: / yesdavidgray
LinkedIn: / davidagray
🔗 Source Code: github.com/gitdagray/blurdata...
How to Use the Next.js blurDataUrl Images Prop with Plaiceholder
(00:00) Intro
(00:14) Welcome
(00:37) What is a blurDataUrl?
(01:17) placeholder & Plaiceholder
(01:37) placeholder prop
(02:37) Next.js generated blurDataUrl
(04:49) Plaiceholder generated blurDataUrl
(05:36) Applying Plaiceholder in your project
(09:35) Multiple Images & Avoiding Waterfalls
📚 Tutorial References:
🔗 Next.js Image: nextjs.org/docs/app/api-refer...
🔗 Plaiceholder: plaiceholder.co/docs
Was this tutorial about How to Use the Next.js blurDataUrl Images Prop with Plaiceholder helpful? If so, please share. Let me know your thoughts in the comments.
#nextjs #blurdataurl #plaiceholder

Пікірлер: 50

@7doors847 10 ай бұрын

Amazing stuff Dave! 👌 These “extra” Next.js tuts are an absolute delight. Also very nice that you’ll be in The Net Ninja channel. Looking forward to it.

@DaveGrayTeachesCode 10 ай бұрын

Thank you!

@dimasheiko 10 ай бұрын

Love these Next.js tips and tricks videos. Please keep them coming!

@skylershu 10 ай бұрын

Thank you, Dave. Exactly what I need.

@GatoNordico 10 ай бұрын

This is really nice! Thank you for making this video. I started migrating my img into Image yesterday and your videos are helping me a lot 🙌🏻

@iAmTheWagon 10 ай бұрын

I really appreciate this. Thank you.

@TravinskiyVladislav 10 ай бұрын

Thank you Dave

@AshishKumar-du2wk 10 ай бұрын

I read about this in the docs but never knew how to use this thanks

@user-bb7fz8cl3c 10 ай бұрын

thank for your all videos

@mdsalahuddin46464 10 ай бұрын

Great tutorial Dave

@yonathanlevi7361 7 ай бұрын

thank you so much Dave. my project looks much more professional thanks to u!!!

@user-lo3md8go7j 10 ай бұрын

Thank you so much for the tutorial! Is it possible to use Nextjs and its features (SSR,SSG, ISR) with a Java Backend for example?

@khalilbenmeziane8836 10 ай бұрын

best dave thank you

@GabrielMartinez-ez9ue 8 ай бұрын

Hi Dave, I have discovered something interesting that maybe you know the answer. If the images range from 1mb and 3mb, and lets say you are fetching 16 images... it takes a very long time to generate those base 64 strings because it has to download all those images in order to complete those strings. What would you do in that case?

@babayaga6172 10 ай бұрын

Very informative Please make a video on how to add cache layer like redis in nextjs or with prisma How to use pm2 load balancing like advance stuff Thank you Sir 😊

@GabrielMartinez-ez9ue 10 ай бұрын

Thanks a lot. Normally we would map a bunch of images per request. In that case I suppose create an custom image component to handle every image using your custom plaiceholder setup.

@DaveGrayTeachesCode 10 ай бұрын

You could extract the parent div and the Next.js image component from the code I've provided here to create a custom image component. Note the code near the end of the tutorial where I show how to process multiple images and add the blurDataUrl.

@dopetag 10 ай бұрын

Dave, can you please make a video of using videos in Next.js And especially videos as ui. For example, videos as thumbnails in grid of product cards.

@CTILET 10 ай бұрын

Dave i got a job because i watch your videos! Thank you very much!

@DaveGrayTeachesCode 10 ай бұрын

That is the feedback I like to hear! Congratulations! 🎉

@ujangaripin7630 10 ай бұрын

this awesome video, can you make a fullstack tutorial video with api from firebase using login, create, read, update, delete

@darelbvcr687 8 ай бұрын

i can use it when i am retieveing image from mysql db?

@adlerspencer 10 ай бұрын

@DaveGray Dave, you might want to fix the typo "Plaiceholder" unintentionally in the title. This could affect the ranking and reach of your video. By the way, I'm a huge fan and a regular watcher of your channel. Kudos for the amazing work and thank you for the very high-quality content. _Recife, Brazil!_ 🇧🇷

@DaveGrayTeachesCode 10 ай бұрын

No, you should watch the video. It is specifically about a package that the Next.js docs recommend and is spelled Plaiceholder. That said, thank you for the kind words 😀

@adlerspencer 10 ай бұрын

@@DaveGrayTeachesCode How embarrassing of me. And I thought I was helping. 🤦‍♂Forgive me for the inconvenience. Indeed, I haven't watched the video yet (working), but when I get home I'll open my friday's beer to drink AFTER I've watched it. rs

@AD-wg8ik 10 ай бұрын

Getting error: "can't resolve child process" when trying to use plaiceholder

@codeadvocacy 10 ай бұрын

have you found the solution? I am also getting same error

@ashmitsharma9096 5 ай бұрын

exact same error :(

@hamed4451 10 ай бұрын

its Amazing Dave but i don't think the dynamic way is not very good for performance to use in the list of images (that fetched from the api) isn't it? the calculation / await for convert to base64 is good for the list of images?

@DaveGrayTeachesCode 10 ай бұрын

If you have a dynamic source of images, it is what you have to do.

@passhub 9 ай бұрын

@@DaveGrayTeachesCode Thanks for your tutorial, but I kind of confused about this solution. What about that time, when "plaiceholder" package making this blured images for your? It should take some time and affect on app permomance, especially if we are talking about SEO optimization. The way i see how it works. For example you have 20 images on the page, and we are creating 20 blurDataImages from them, but this lib needs to "download" your images to create blurs from, right? If so does it slow your perfomance anyway?

@user-ih9wm5hu6f 10 ай бұрын

I dont know how can i use redux in next 13 before like next 12 i use next redux wrapper but now aday i dont have any idea about that can you help me please

@magnuserikkeenrobot1117 9 ай бұрын

If I use this in my NextJS application, wont I have to think about the performance if I do this on many remote images? And will it save/cache it somehow?

@DaveGrayTeachesCode 9 ай бұрын

You should always consider performance. That said, also consider the user experience. With remote (dynamic) images, which will deliver a better user experience? I have a full image gallery course on the Net Ninja channel that uses this, shows caching, etc.

@magnuserikkeenrobot1117 9 ай бұрын

im getting all the remote urls to my images in getstaticprops. should i run the plaiceholder code there too? so that it gets run at build time, and not one every request?

@raves_r3177 Ай бұрын

How to do this in client component? You cant do async/await in client components.

@karlapple7275 10 ай бұрын

how much does it cost?

@DenInside 4 ай бұрын

but what if i use a client component with images?

@codedusting 10 ай бұрын

Is there any seo problems?

@DaveGrayTeachesCode 10 ай бұрын

Next.js is a good choice for SEO.

@darawan_omar 10 ай бұрын

Hello Mr Dave Sorry for bothering you i have a question How do that when i defined a state or varaible or anything the code have under red line that say value never read i know this not been using yet but how can change this red line to disable or color gray for that situation thanks alot for helping..... with respeact

@DaveGrayTeachesCode 10 ай бұрын

Not sure I understand your question. Please join my Discord with the link in the description and many can help there.

@darawan_omar 10 ай бұрын

@@DaveGrayTeachesCode when you create a state const[count, setCount] = useState(0) the color ( count )and (setCount )change color to gray because not been using yet How can do that beacuse when i do that give me th red underline i wanna change that red line to that color gray

@kasper369 10 ай бұрын

Next.js Image gallery in the start of this video. Can I have the source code for that?

@DaveGrayTeachesCode 10 ай бұрын

If you watch til the end, I tell you where it will be published.

@user-uc8bj7rd9y 10 ай бұрын

Crio challenge

@mauriciabad 9 ай бұрын

The dynamic example makes no sense because you're fetching the image XD. Even in server components, it makes it load the image 2 times, think about it: first for the placeholder, and second for the client. Total nonsense

@DaveGrayTeachesCode 9 ай бұрын

You are missing how Next.js caches fetch requests. In Next.js, you request data where needed.

@ollebergkvist8538 8 ай бұрын

You never fetch the image 2 times. You fetch a placeholder of eg. 300 bytes (if you go with the base64 plaiceholder option), that's displayed when the picture is loaded for the first time, and then the image is cached. If you don't use placeholders you get terrible UX on image heavy pages, as the user just sees empty containers until the images are loaded. This is also true for high quality hero images that uses the priority attribute. Looks really weird to visit a page with a huge hero image for the first time and you basically just see a white box, even if it's just for some milliseconds (on 5G and fiber connections), and then you don't even want to think about the users who are visiting the page on 3G connections. Alternative is to add a blur animation using the onLoadingComplete attribute of next/image, but then you will show the animation when the images are cached as well so it's not ideal, at least until Next.js adds a prop that allows us to see if an image is served via the cache or not.

@mauriciabad 8 ай бұрын

@@ollebergkvist8538 Partially. In the frontend you only fetch the "big" image once. But when requesting the html page, Next.js runs the DynamicPage component, and it fetches the "big" image to generate the base64. So in the total load time, you have to wait for the server to fetch the image, and then, in the frontend again wait for it to load. @DaveGrayTeachesCode explains that, due to Next.js cache, the server's fetch is only ran a small amount of times I don't know much about Next.js' cache, but it still doesn't feel like a good solution. This are the reasons I think that: 1) you are limited to the cache. 2) I don't know if te chache can scale horizontally. 3) If there are may images all fetchs can be in parallel? 4) Can it happen that there are so many images that the cache gets filled? What looks simpler and more efficient to me is that every time an image is uploaded or edited, store somewhere (database) the base64, and then just fetch the code instead of the whole image.