How to Use the Next.js blurDataUrl Images Prop with Plaiceholder
Вставка
- Опубліковано 1 сер 2024
- 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
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.
Thank you!
Love these Next.js tips and tricks videos. Please keep them coming!
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 🙌🏻
Thank you, Dave. Exactly what I need.
I really appreciate this. Thank you.
thank for your all videos
Great tutorial Dave
I read about this in the docs but never knew how to use this thanks
Thank you Dave
thank you so much Dave.
my project looks much more professional thanks to u!!!
best dave thank you
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?
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?
i can use it when i am retieveing image from mysql db?
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 😊
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
Dave i got a job because i watch your videos!
Thank you very much!
That is the feedback I like to hear! Congratulations! 🎉
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.
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.
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.
Getting error: "can't resolve child process" when trying to use plaiceholder
have you found the solution? I am also getting same error
exact same error :(
How to do this in client component? You cant do async/await in client components.
but what if i use a client component with images?
this awesome video, can you make a fullstack tutorial video with api from firebase using login, create, read, update, delete
@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!_ 🇧🇷
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 😀
@@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
how much does it cost?
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?
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.
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?
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?
If you have a dynamic source of images, it is what you have to do.
@@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?
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
Not sure I understand your question. Please join my Discord with the link in the description and many can help there.
@@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
Is there any seo problems?
Next.js is a good choice for SEO.
Next.js Image gallery in the start of this video. Can I have the source code for that?
If you watch til the end, I tell you where it will be published.
Crio challenge
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
You are missing how Next.js caches fetch requests. In Next.js, you request data where needed.
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.
@@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.