Build a Glass 3D Login Card in Next.js
How to build the glass login on this site: blur, stacked layers, pointer tilt, and a form that stays in the browser.
Next.js, React, TypeScript, Supabase, Postgres, CSS, and SEO guides with code you can paste into a real project.
27 guides, newest first
How to build the glass login on this site: blur, stacked layers, pointer tilt, and a form that stays in the browser.
How a technical site earns another pageview: one next step on the hero, in the article, and after the last paragraph.
One glass stage, two forms. How to share the shell between sign-in and create-account without cloning the CSS.
A few lines of pointer math for a 3D card tilt, with a rest state and a reduced-motion exit.
A glass panel can look soft and still pass a glance test. Put the contrast on a fill, not on the blur.
A practical way to serve local blog covers with next/image so the card, the hero, and the phone each download a fitting file.
How to look at a real SELECT and add the smallest Postgres index that makes that page fast.
A small sliding-window limit for a public route, plus the reason an in-memory map is only a start on serverless.
A small GitHub Actions workflow that fails the pull request when TypeScript or the Next.js build fails.
How to apply a dark theme before first paint so readers never see a white flash.
A practical cache model for the App Router: tags, lifetimes, and the smallest revalidate that still shows fresh content.
How useActionState, a Server Action, and the pending flag replace a pile of useState in a React 19 form.
A row-level security layout for Supabase so one tenant cannot read another tenant's rows, even with the anon key.
A Zod schema at the Server Action boundary so bad input fails before a write, with errors the form can show.
How to render BlogPosting JSON-LD from a Next.js Server Component without duplicating the visible article.
How to put customer files in a private Supabase bucket and share them with signed URLs that expire.
Turn on Google and Facebook sign-in with Supabase Auth, start the OAuth flow from the browser, and finish it in a Next.js callback route.
What Google checks before AdSense approval, why sites get rejected, and the pages and content that make a review go faster.
Discover the best free AI code editors, backend services, and deployment platforms to build modern web and mobile apps faster.
Discover the best web and mobile app types you can build today, along with free developer software download links and step-by-step setup instructions.
Stream chat from OpenAI or Gemini through a Next.js route handler, then render it with useChat on the client.
Colocate the fetch with the UI that needs it, then run independent requests in parallel so a page does not wait on itself.
Treat the client directive as a boundary, not a decoration. Props that cross it have to be data, not functions or classes.
Write a specific title, give each guide one URL, and make the heading structure match the outline a reader would sketch.
Parse input where it enters. After that, the type system should carry a value you already checked.
Decide the page width, the stack gap, and the card padding once. Most screens are those three decisions repeated.
Write the history as a sequence of reasons. A reviewer should understand the change before opening the diff.