What is the difference between Server Components and Client Components in Next.js 15?

Server Components run exclusively on the server — they can access databases, read secret environment variables, and never send their source code to the browser. They are the default in the App Router. Client Components, marked with "use client" at the top of the file, run in the browser and have access to React hooks (useState, useEffect), browser APIs, and event handlers. The key rule: keep components as Server Components unless they need interactivity or browser-specific APIs. This keeps your JavaScript bundle small and keeps sensitive logic off the client.

Why must AI API calls be server-side only and never in Client Components?

Your AI provider API key (Groq, OpenAI, etc.) is a secret credential that grants billing access to your account. If you call the API from a Client Component, the API key is embedded in your JavaScript bundle and visible in the browser's Network tab — any user can extract it. On the server, the key stays in your environment variables, which are never sent to the browser. Always call AI APIs from Server Components, Route Handlers (app/api/), or Server Actions — and never use the NEXT_PUBLIC_ prefix on any secret key.

What is Row Level Security and why is it critical for SaaS applications?

Row Level Security (RLS) is a PostgreSQL feature that Supabase exposes through policies. Without RLS, the Supabase JavaScript SDK can query any row in a table using the anon key — meaning a user who constructs the right query can read other users' data, even if your app code would never do that. RLS adds a database-level WHERE clause to every query automatically, evaluated against the authenticated user's JWT. Even if your application has a bug that constructs a bad query, the database itself enforces data isolation. For multi-tenant SaaS, RLS is the difference between a data breach and a safe failure.

How do you set up Supabase authentication with Next.js 15 App Router?

Install @supabase/ssr and @supabase/supabase-js. Create two client factory functions: one using createServerClient (reads/writes cookies via Next.js cookies()) for use in Server Components and Route Handlers, and one using createBrowserClient for Client Components. In middleware.ts, call supabase.auth.getUser() (not getSession()) to verify the user's JWT on every protected request and redirect to /login if unauthenticated. Supabase handles the OAuth/email flows; you just need to set up the callback route at /auth/callback to exchange the code for a session.

What are Groq AI's free tier limits and is it suitable for a production SaaS?

Groq's free tier (as of mid-2026) provides rate-limited access to models including Llama 3.3 70B, with limits around 30 requests per minute and 6,000 requests per day per API key. For a production SaaS with moderate traffic, the free tier works well for MVP and early users. As you scale, Groq's paid tiers offer higher rate limits at low per-token costs — Llama 3.3 70B costs roughly $0.59 per million input tokens. The main production consideration is implementing retry logic with exponential backoff for 429 rate limit errors and graceful degradation when the AI feature is unavailable.

Engineering·12 min read·June 20, 2026

⚡ Building a Full-Stack SaaS with Next.js 15, Supabase, and Groq AI

A complete guide to building production-ready SaaS applications with Next.js 15 App Router, Supabase authentication and Row Level Security, and Groq AI integration — covering architecture, data isolation, and deployment to Vercel.

📖Full-Stack SaaS with Next.js, Supabase & Groq AI (Full Access)

View →

Why Next.js 15, Supabase, and Groq Are the Production SaaS Stack

Building a SaaS product in 2026 demands a stack that gives you speed to ship, genuine security by default, and AI capabilities without a PhD in infrastructure. The combination of Next.js 15 App Router, Supabase for auth and database, and Groq for inference hits all three marks. Next.js gives you React Server Components so your data fetching is tight and lean. Supabase gives you Postgres with Row Level Security baked in so your multi-tenant isolation is enforced at the database layer — not just in your application code. Groq gives you sub-second LLM inference via API, meaning your AI features respond fast enough that users stay in flow.

Topics covered

Next.js 15 SaaSNext.js App RouterSupabase authenticationRow Level SecurityGroq AI integrationfull-stack SaaS tutorialNext.js server componentsSupabase RLS policyVercel deploymentNext.js middleware authSupabase getUserGroq SDK Node.jsSaaS architecture Next.jsNext.js route groupsSupabase browser clientNext.js API routesserver-side AI callsmulti-tenant SaaS Next.jsSupabase service role