Building an Image Gallery with Next.js, Supabase, and Tailwind CSS

Learn how to create an image gallery with dynamic content from a PostgreSQL database, with support for content updates without needing to redeploy.

0:00 — Introduction
0:18 — Create Next App
0:37 — Running Locally
0:59 — Using Tailwind CSS (Gallery Component)
1:21 — Building an Image Component
1:51 — Aspect Ratios & Group Modifiers
4:50 — Blur-Up Image Placeholders
5:45 — Setting Up Supabase
6:36 — Connecting to Supabase
7:35 — Adding Data to Supabase
8:42 — Fetching Data from Supabase
10:45 — Image Gallery Demonstration
11:01 — Deploying to Vercel
12:02 — On-Demand Incremental Static Regeneration
12:38 — Supabase Function Hooks
13:51 — Revalidation API Route
14:55 — Redeploying
15:42 — On-Demand ISR Demo
16:05 — Conclusion

Links
–––––

–––––

#tailwind #supabase

[kubakazimierczak]

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"

[krazymeanie]

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.

[shashank]

Super excited as lee came back with supabase. Next.js + Supabase = 🔥

[yoJuicy]

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!

[starmorph]

the loading in from the table DX is so nice

[simonswiss]

TIL about the `onLoadingComplete` prop – good stuff Lee! ✨

[bossdaily]

can you send a link to the csv file you used to populate the database?

[Deus-lo-Vuilt]

Excellent project, hopefully you can upload more content from tailwind and nextjs

[monty_]

This was great! Used this concept to do the same using styled components

[mauroquiroga]

OMG you REALLY make it look easy. Amazing content, thank you very much!

[tridungbk]

Great!, thanks, Lee, look forward next video from you

[mahfoudh_arous]

Excellent tutorial, so concise and clear!

[matthewchukwu]

Nice one @Lee, thanks a lot. I might consider moving from strapi to supabase.

[ordruker]

Lee, you're my hero! I love your videos <3

[helocat]

Thank a lot for putting an effort to make it. This is high quality content

[amirnoorani]

Simple presenting is awesome as always

[silenux]

This was awesome.
Thanks for sharing your knowledge.

[andreinasesarg]

Thank you VERY much, this is very helpful!!!

[Troy-olfk]

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

[matthewchukwu]

Hello @Lee, please what is the alternative for updating the next.js app since the supabase function hooks is still in ALPHA?