The Stack
Next.js 14 on Cloudflare Pages — Free hosting, global CDN, unlimited bandwidth on the free tier. Build command: npx next build. Output directory: .next. Node version: 20.
Supabase Free Tier — 500MB database, 1GB storage, 50,000 monthly active users, built-in auth with email and OAuth, row-level security out of the box.
Groq Free API — 14,400 requests per day on the free tier. llama-3.3-70b-versatile is genuinely GPT-4 quality for most tasks.
GitHub Actions — 2,000 free minutes per month for cron jobs, background processing, and maintenance scripts.
Resend — 3,000 emails per month free. Transactional only.
Upstash Redis — 10,000 commands per day free. Use for rate limiting and caching.
What This Stack Cannot Do
Server-sent events with long-lived connections. Heavy background processing (use GitHub Actions cron instead). Anything that requires persistent server state in memory (use Supabase or Redis instead). WebSockets at scale.
What This Stack Handles Perfectly
Any read-heavy web application. Anything that can be modelled as request-response. AI-powered tools. Content platforms. Community sites. Most SaaS products at under 10,000 daily active users.
The Wiring Pattern That Saves Hours
// lib/supabase.js — two clients, one file
import { createClient } from '@supabase/supabase-js'
// Server-side — full access, never exposed to browser
export const supabaseAdmin = createClient(
process.env.SUPABASE_URL,
process.env.SUPABASE_SERVICE_KEY
)
// Client-side — anon key, RLS protects rows
export const supabasePublic = createClient(
process.env.NEXT_PUBLIC_SUPABASE_URL,
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
)Always use supabaseAdmin in API routes (server-side). Always use supabasePublic in client components. Never expose the service key to the browser.
