Thanks for the tutorial about the absolute basics! A few notes for future followers who would follow this with Next 13: For the JS: - the `next/Image` used in tutorial is `next/legacy/Image` in Next 13, but you can use the `next/image` by replacing `layout="fill"` with just `fill` prop - the `res.unstable_revalidate` is now `res.revalidate` For the Supabase - the "Function hooks" in supabase are now called "Webhooks"
Freaking loved this. I've really been missing your tutorials/videos man. Now that React 18 is soon to be released I'm assuming we'll be seeing a lot more of you for a while. Keep up the good work, it's undeniably appreciated.
OMG this is amazing. I literally just built this exact same thing. I ran into hardship with getStaticPaths and the slug file and fetching from my DB... Would love more content with this stack!
I added a 'keywords' field in the images table, but when I display it in the component it throws an error : Property 'keywords' does not exist on type 'Image'.ts(2339), how can i fix it ? I can't find the definition of the Image type
@@leerob That would be nice! But are also planning making content on SSR Streaming and Progressive Hydration? I think that's also a huge part of React 18
Is it useful to use a database like this for something quite simple, versus a CMS or cloudinary? Genuine question would like to know people's thought! Can't wait to try suoerbase
This does not work very well for my next.js 12 project, it works for some images, and on some reloads, and sometimes the blur lags so hard it feels like it's going in 20 fps. Using Firebase and it's a larger project than the one you demoed. I'm pretty sure the root to my issues is due to how I have set things up, shame I will probably not have time to implement it since this is a rather nice thing to see as content is loading up
Because I have remote images instead of local ones (e.g. in the file system): nextjs.org/docs/basic-features/image-optimization#local-images You could also compute blurDataUrl on the server and send it back, but that's a video for another time :)
@@leerob I can't believe Lee Rob is replying to me. I'm using plaiceholder to generate blurred images. I get 404 when I deploy to vercel but works in local. Also it'd be nice if you guys could provide more information about SSR and how next uses SSR in the docs.
Hi Lee, i'm still concerned about one thing is each time you navigate to other page then come back to this page blur effect shows up again, it is great for the first time while image is loading, but it will get boring if the effect show over and over again, is there any solution for that?
Hi Lee! I tried to do this on next13, but I'm having some issues with the new Image component. Layout and objectFit are deprecated, and the images just fill the whole screen :/ any idea?
Hii ! I don’t know if this would help but I put the Image in a div, this div has a className that contains w-64 h-64 , then I added fill={true} and and a className with « object-cover » properties to the Image. Hope it would solve your problem ! I’m struggling too with this new Next Image !
I don't understnd why you'd need to redploy (and not just refresh) if changes are made in a live database. Is that something specific with getStaticProps?
This is because we're building a static page (with getStaticProps) instead of fetching data every request on the server (with getServerSideProps) or loading images on the client side (using just React).
Let's say you want to do a gallery with a large amount of images (200+). Is there value in pagination here for efficiency? If so, what is the best way to implement? Thank you!
@@ryadean Thanks! Out of curiosity, at what point do you feel it would be necessary to introduce pagination? For context, most of these image files in the gallery are around 75-100kb in size.
the loading in from the table DX is so nice
Thanks for the tutorial about the absolute basics! A few notes for future followers who would follow this with Next 13:
For the JS:
- the `next/Image` used in tutorial is `next/legacy/Image` in Next 13, but you can use the `next/image` by replacing `layout="fill"` with just `fill` prop
- the `res.unstable_revalidate` is now `res.revalidate`
For the Supabase
- the "Function hooks" in supabase are now called "Webhooks"
Thanks for the pointer. but simply using the fill messes with the aspect ratio, though!
can you send a link to the csv file you used to populate the database?
Freaking loved this. I've really been missing your tutorials/videos man. Now that React 18 is soon to be released I'm assuming we'll be seeing a lot more of you for a while. Keep up the good work, it's undeniably appreciated.
we need a react 2030 course haha
OMG this is amazing. I literally just built this exact same thing. I ran into hardship with getStaticPaths and the slug file and fetching from my DB... Would love more content with this stack!
Super excited as lee came back with supabase. Next.js + Supabase = 🔥
I added a 'keywords' field in the images table, but when I display it in the component it throws an error : Property 'keywords' does not exist on type 'Image'.ts(2339), how can i fix it ? I can't find the definition of the Image type
npx create-next-app --example with-tailwindcss image-gallery
no need thanks 😃
Hello @Lee, please what is the alternative for updating the next.js app since the supabase function hooks is still in ALPHA?
thanks alot very nice tut
Refactor this video in the new nextjs app router doing some pagination or infinite scrolling properly, there are no content about that!!
Regarding React 18, which is just about to come out. Can you please make an in depth tutorial about SSR Streaming with Next.js?
Planning to make React 18 and Server Components content in the future, yes!
@@leerob That would be nice! But are also planning making content on SSR Streaming and Progressive Hydration? I think that's also a huge part of React 18
Really love this video, can you please share the csv file which you have used in this video?
TIL about the `onLoadingComplete` prop - good stuff Lee! ✨
Great content, thanks for sharing! 🚀
Why this not work on replit
The storage isn't sufficient on Supabase(not self-hosted). Do you know how do I connect AWS S3 to it?
Vercel + Supabase + S3? Possible?
This is super amazing!!
Pretty slick video, how about expanding that gallery where clicking on an image opens up a Sliding Gallery.
I need that csv file
Is it useful to use a database like this for something quite simple, versus a CMS or cloudinary? Genuine question would like to know people's thought! Can't wait to try suoerbase
Hi!
How can i use res.unstable_revalidate(`/image/${id}`) with dynamic routes?
This does not work very well for my next.js 12 project, it works for some images, and on some reloads, and sometimes the blur lags so hard it feels like it's going in 20 fps. Using Firebase and it's a larger project than the one you demoed. I'm pretty sure the root to my issues is due to how I have set things up, shame I will probably not have time to implement it since this is a rather nice thing to see as content is loading up
Great video. A question: could you add an RSS feed to your blog? I always forget to check it and don't use cancer like Twitter.
Excellent project, hopefully you can upload more content from tailwind and nextjs
Wow. Nice work.
I love to add some filters to sort content.
Can you give any hint on how to filter content by onclick?
Nice one @Lee, thanks a lot. I might consider moving from strapi to supabase.
Thank you VERY much, this is very helpful!!!
Great!, thanks, Lee, look forward next video from you
i have a question, how fill layout worked for you without relative parent div?
welcome back Lee
Why aren't you using the blurDataUrl prop here
Because I have remote images instead of local ones (e.g. in the file system): nextjs.org/docs/basic-features/image-optimization#local-images
You could also compute blurDataUrl on the server and send it back, but that's a video for another time :)
@@leerob I can't believe Lee Rob is replying to me. I'm using plaiceholder to generate blurred images. I get 404 when I deploy to vercel but works in local.
Also it'd be nice if you guys could provide more information about SSR and how next uses SSR in the docs.
completed this project on my own, add on there is no need to set the webhook to be post, you could just use get as it is
Hi Lee, i'm still concerned about one thing is each time you navigate to other page then come back to this page blur effect shows up again, it is great for the first time while image is loading, but it will get boring if the effect show over and over again, is there any solution for that?
hey Lee, what camera are you using? Nice tutorial by the way.
why is there a 'cn' method inside className ?
super is stil in beta with their triggers, which is sad to see
Ok now I’m in love with this stack!!!
OMG you REALLY make it look easy. Amazing content, thank you very much!
This was awesome.
Thanks for sharing your knowledge.
This was great! Used this concept to do the same using styled components
Hi Lee! I tried to do this on next13, but I'm having some issues with the new Image component. Layout and objectFit are deprecated, and the images just fill the whole screen :/ any idea?
Hii ! I don’t know if this would help but I put the Image in a div, this div has a className that contains w-64 h-64 , then I added fill={true} and and a className with « object-cover » properties to the Image. Hope it would solve your problem ! I’m struggling too with this new Next Image !
Lee, you're my hero! I love your videos
It would be great to have a tutorial on image optimisation with remote images. layout = 'fill' doesn't seem to optimise images very well.
Thank a lot for putting an effort to make it. This is high quality content
Simple presenting is awesome as always
I don't understnd why you'd need to redploy (and not just refresh) if changes are made in a live database. Is that something specific with getStaticProps?
This is because we're building a static page (with getStaticProps) instead of fetching data every request on the server (with getServerSideProps) or loading images on the client side (using just React).
I'd recommend going through nextjs.org/learn if some of these concepts are new :)
hey Lee, thanks a lot, I've tried to apply the `revalidate api` just like you did, but with strapi cms, but for some reason id didn't work. !
Hey, do you have a repo you can share to look at?
@@leerob I have send you a twitter DM, thanks in advance
Excellent tutorial, so concise and clear!
Let's say you want to do a gallery with a large amount of images (200+). Is there value in pagination here for efficiency? If so, what is the best way to implement? Thank you!
200+?
I'm thinking about 100.000+ images xd
The images are lazy loaded so pagination wouldn't be needed for such a small number of images.
@@ryadean 100k is small?
@@ryadean Thanks! Out of curiosity, at what point do you feel it would be necessary to introduce pagination? For context, most of these image files in the gallery are around 75-100kb in size.
niceeeeee
I don't know typescript, can I do dis
same tbh
@@leerob sorry, what is tbh🤷♂
@@behruzberdiyev4136 to be honest
i did exactly the same but, when i reload its not changing as it should. but when i check the /api/validate i saw "invalid token" what does it mean?
Waiting.............................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................