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

Lee starts with a Next.js and Tailwind CSS starter and builds a responsive image grid. He adds hover styling and a square aspect ratio, then switches to Next.js Image to crop images cleanly, allowlist image domains, and show a blur-up loading effect.

He creates a Supabase Postgres project, stores its URL and service role key in local environment variables, and creates an `images` table with name, link, username, and image source fields. He imports sample rows and uses `getStaticProps` to fetch them on the server, then passes the results into the gallery.

Lee pushes the repository to GitHub and imports it into Vercel, adding the Supabase environment variables before deployment. The deployed gallery serves the images with the blur effect and lazy loading.

Because `getStaticProps` generates a static page, database edits do not appear until a redeployment unless the page is revalidated. Lee configures a Supabase database hook to call a Vercel API route after image inserts, updates, or deletes. The route checks a secret and revalidates the index page; changing a name in Supabase then updates the deployed gallery after reload.