7 Next.js + Supabase Architecture Decisions I'd Make Differently

The best time to make good architecture decisions is before you have 50,000 users and a codebase that's grown past the point where refactoring is easy.

These are the decisions that cost me the most time to undo. Not theoretical mistakes — actual things I shipped, regretted, and had to fix under pressure.

1. Using the Supabase Client Directly in Components

Early on, I called supabase.from('posts').select() directly inside React components. It worked. Then I needed to add caching. Then I needed to add error handling. Then I needed to change the query shape. I was doing it in 15 different places.

What I'd do instead: create a data access layer from day one.

// src/lib/data/posts.ts export async function getPostsByUser ( userId : string ) { const supabase = await createClient () const { data , error } = await supabase . from ( ' posts ' ) . select ( ' id, title, created_at ' ) . eq ( ' user_id ' , userId ) .…