DB-Viz

NestJS used class-based controllers and dependency injection — patterns that have no direct equivalent in Next.js Route Handlers. Naively porting them produced bloated route files with no separation of concern.

Extracted all business logic into plain TypeScript service modules — no decorators, no DI container. Route Handlers became thin orchestrators. The result was actually cleaner than the original NestJS services because we removed the framework ceremony and kept only the logic.

Authentication was deeply coupled to NestJS Guards and Passport strategies. Session validation was happening in middleware that had no equivalent in the Next.js request lifecycle.

Rebuilt auth from scratch using better-auth with a cookie-based session model. Wrote a lightweight session utility that works in Server Components, Route Handlers, and middleware — giving us the same protection surface as the old Guard system but with a fraction of the code.

After login, navigation to the dashboard kept redirecting back to the login page — even though the session cookie was being set correctly and getSession was returning the authenticated user.

The root cause was a race condition between useSession hydrating on the client and the AuthProvider's useEffect firing with a stale null session. Fixed by removing the manual window.location redirect after login and letting the session state drive navigation — the redirect only fires once useSession reflects the authenticated state.

The production cookie (visio.session_token) was visible in DevTools but not being forwarded to Next.js middleware on Vercel, causing every authenticated route to redirect to login.

Traced the issue to better-auth's cookie prefix behaviour on HTTPS — Vercel's edge was receiving the cookie but middleware was checking the wrong name. Added fallback cookie name checks in middleware and verified the BETTER_AUTH_URL environment variable matched the exact production domain without a trailing slash.

Tailwind CSS v4 caused a PostCSS parse error that crashed the build — a JSX component had been accidentally pasted into globals.css during a chaotic refactor session.

Removed the embedded JSX, consolidated the shiki code-block CSS variables into a single :root block (removing the conflicting .dark overrides), and locked the dark mode colour scheme to oklch values that render consistently across both light and dark mode without the old navy-blue flash.