For those searching for a quick solution without relying on a third party: const imageBlur = await fetch( `your image url` ).then(async (res) => { return Buffer.from(await res.arrayBuffer()).toString("base64"); });
This is actually really helpful, great content as always. This is kind a different from all the awwwards hacks, but it's a really cool video with lots of great tips on handlings blurs. I've been looking for some educational video about this, and everyone does the exact same video explaining nothing xD. Cheers, your content its getting better every new video.
Module build failed: UnhandledSchemeError: Reading from "node:fs/promises" is not handled by plugins (Unhandled scheme). Webpack supports "data:" and "file:" URIs by default. You may need an additional plugin to handle "node:" URIs. Not working anymore... getting above error. I am on next.js 13.5.6
Quick update on the same. Dyanmic image blur effect only works on serverside components. It will not work, if any of the parent is using "use client". And there is no way to use it if you are using framer-motion on parent.
Hey Oliver I was wondering what CMS did you use for your e-commerce website you built for your client. The one that is on your portfolio. Thank you in advance!
Can u make a cool video of your own blog website, of how to make it's simple yet eligent.. BTW love from India 🤝🏻 great work bro recently discovered your channel..
Is there any way to use this server component if any of it's parents are client components? The reason for this being that I'm using framer motion on most of the image parents and this seems to backfire
Awesome video, but it seems to me that if we have, for instance, 30-50 images to load and if we were to wait for every single buffer, there's going to be a big waterfall, am I right? in this case i think we should resolve all promises 🤔
@@olivierlarose1 Hey Oliver, thanks for letting me know! My bad for misunderstanding. Plaiceholder sounds like an interesting library, and now I know better. Keep up the great content! 😄👍
I'm using a cms with the app router and trying to use plaiceholder on all of my images, but I can't figure out how to do it. Would you happen to know or clear up how I could do this?
0:19 btw : how to implement a progress bar in next js 13 ? i can't find a way to do that since there is no _app.jsx in my app & layout.jsx work differently
I keep getting this error: "Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead." I guess it's because I'm using async in declaring react component DynamicBlurPlaceholder. Why don't you get it?
It seems you might have forgot to add 'await' before calling the function is that possible? If it's returning you a promise you need to 'await' it. Hope that helps!
Год назад
@@olivierlarose1 no, It's waiting for it. Might try making an asynchronous function outside the component function. Tomorow morning. It's 4am here lmao.
Plaiceholder is server side so you can’t directly use it inside a client component. You can always fetch the base64 outside the client component and give it as props, or you could use the custom implementation that I showed in this video (without plaiceholder)
let say i have 2 files, page.tsx is the server component, and ClientComponent.tsx is the client component, and i'm confused how to pass base64 from server component to client component with dynamic image from the backend. page.tsx =================================== const getBlog = async () => { ............. }; const Blog = async () => { const data = await getBlog(); return (
); }; =================================== ClientComponent.tsx =================================== "use client" const ClientComponent = ({ data }: {data: any}) => { const [blogs, setBlogs] = useState(data) return ( blogs.map((blog: any)=> { ........ // this will return error cause plaiceholder can't be use in client component // }) ) } =================================== can u help me to fix this code, and sorry for my bad english, hope u understand🙏
For those searching for a quick solution without relying on a third party:
const imageBlur = await fetch(
`your image url`
).then(async (res) => {
return Buffer.from(await res.arrayBuffer()).toString("base64");
});
This is actually really helpful, great content as always. This is kind a different from all the awwwards hacks, but it's a really cool video with lots of great tips on handlings blurs. I've been looking for some educational video about this, and everyone does the exact same video explaining nothing xD. Cheers, your content its getting better every new video.
Hell yeah glad you like the content💯
I was literally having problem with bluebashing the placeholder images the other day! Cheers mate!
Glad it helped🤝
Absolutely incredible tutorial. Detailed and easy to understand.
Thanks, Mr. Larose! Great contents! (as usual) 🚀
🙏thanks my friend
Amazing video Olivier.
Thanks man.
Please I have a hard time using videos in Next Js. Please can you do a video on that too?
I tried too and I found no real difference with other React Framework
Your channel is amazing man! keep going🔥👏🏻
Appreciate man🤝💯
Great video man. You give me loads of inspiration to create more videos!
Lets goo🔥
Module build failed: UnhandledSchemeError: Reading from "node:fs/promises" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "node:" URIs.
Not working anymore... getting above error. I am on next.js 13.5.6
Quick update on the same. Dyanmic image blur effect only works on serverside components. It will not work, if any of the parent is using "use client". And there is no way to use it if you are using framer-motion on parent.
@@ogCoderGamer Thanks! I have the same issue. Sadly it doesnt work.
Awesome video, thanks!
Great content. You have new subscriber. Thank you
Thank you so much olivier
Hey Oliver I was wondering what CMS did you use for your e-commerce website you built for your client. The one that is on your portfolio. Thank you in advance!
I use Shopify :)
Love u man..love from india..u solved my problem with next image
💯🤝
thank you Olivier another great video
Thanks!🙏
Can u make a cool video of your own blog website, of how to make it's simple yet eligent.. BTW love from India 🤝🏻 great work bro recently discovered your channel..
Thanks! If I get asked more for this I will✍️
Is there any way to use this server component if any of it's parents are client components? The reason for this being that I'm using framer motion on most of the image parents and this seems to backfire
amazing title
Awesome video!!!
🙌 Please make a Notion clone using Next.js stack, Prisma, PostgreSQL, Next-Auth, React-Hook-Form + Valibot, Shadcn UI, Typescript, Tailwind CSS.... Thank you very much! ❤❤❤❤❤
Noted!
Man you're a hero ❤️
🤝
very helpful,thanks alot🤩😍
Thanks man
super useful! thanks
Cheers!🤝
Awesome video, but it seems to me that if we have, for instance, 30-50 images to load and if we were to wait for every single buffer, there's going to be a big waterfall, am I right? in this case i think we should resolve all promises 🤔
It’s all done server side when pre-rendering the page so it won’t affect load time
I like your videos very much
Nice🔥
Nice video as always.
There is a typo on the title, I think.
There's same typo in video also
Hey guys Plaiceholder is the name of the library used it’s not a typo but thanks for backing me up! :)
@@olivierlarose1 Hey Oliver, thanks for letting me know! My bad for misunderstanding. Plaiceholder sounds like an interesting library, and now I know better. Keep up the great content! 😄👍
@@olivierlarose1 oh, I see... lmao 😂
I'm using a cms with the app router and trying to use plaiceholder on all of my images, but I can't figure out how to do it. Would you happen to know or clear up how I could do this?
❤
👊
Valuable
👊🤝
Very useful
Cheers!
why i got "RefferenceError: require is not defined" when i import getPlaiceholder in my code?
Are you trying to use it client side?
youre underrated niggaa
respect
How to use plaiceholder on the client side properly? Thnx in advance!
Good question. Plaiceholder is a server-side library so I wouldn’t know
0:19 btw : how to implement a progress bar in next js 13 ? i can't find a way to do that since there is no _app.jsx in my app & layout.jsx work differently
Progress bar that indicates the page transition?
yup ,
Ok interesting I’ll see what I can do
how would you read the static file on client side since fs only works on server side
Why would you want to do it client side? It’s better to do it server side so thats it pre rendered
@@olivierlarose1 thanks bro
is it possible to do this in a client component?
No, Plaiceholder is a server-side library
I keep getting this error: "Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead." I guess it's because I'm using async in declaring react component DynamicBlurPlaceholder. Why don't you get it?
It seems you might have forgot to add 'await' before calling the function is that possible? If it's returning you a promise you need to 'await' it. Hope that helps!
@@olivierlarose1 no, It's waiting for it. Might try making an asynchronous function outside the component function. Tomorow morning. It's 4am here lmao.
Did you find a solution on this?????? I'm stuck also here (using ts)@
How to use plaiceholder in client component?
Plaiceholder is server side so you can’t directly use it inside a client component. You can always fetch the base64 outside the client component and give it as props, or you could use the custom implementation that I showed in this video (without plaiceholder)
let say i have 2 files, page.tsx is the server component, and ClientComponent.tsx is the client component, and i'm confused how to pass base64 from server component to client component with dynamic image from the backend.
page.tsx
===================================
const getBlog = async () => {
.............
};
const Blog = async () => {
const data = await getBlog();
return (
);
};
===================================
ClientComponent.tsx
===================================
"use client"
const ClientComponent = ({ data }: {data: any}) => {
const [blogs, setBlogs] = useState(data)
return (
blogs.map((blog: any)=> {
........
// this will return error cause plaiceholder can't be use in client component
//
})
)
}
===================================
can u help me to fix this code, and sorry for my bad english, hope u understand🙏
I guess I'm the only one that It couldn't implement this because is too hard
auto pass doctor <
(
👊
❤
👊