Can I use SupaHost with a Next.js app on Vercel?
Yes. A Next.js app on Vercel uses @supabase/ssr and supabase-js with your SupaHost project URL. Set three env vars, allow preview URLs for Auth, and query over HTTP.
Yes. Your Next.js app stays on Vercel and talks to your SupaHost project over HTTPS with supabase-js and @supabase/ssr, exactly as it would with any Supabase project. Set the project URL and keys as Vercel environment variables, add your Vercel domains to the project's redirect URLs, and you're done.
1. Environment variables
In Vercel → your project → Settings → Environment Variables (copy values from Dashboard → your project → Connect → App):
NEXT_PUBLIC_SUPABASE_URL=https://app-one.acme.supahost.space
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOi...
SUPABASE_SERVICE_ROLE_KEY=eyJhbGciOi... # only if server code needs admin access
Never give the service_role key a NEXT_PUBLIC_ prefix; that would ship it to browsers.
2. A server client
// lib/supabase/server.ts
import { createServerClient } from '@supabase/ssr'
import { cookies } from 'next/headers'
export async function createClient() {
const cookieStore = await cookies()
return createServerClient(
process.env.NEXT_PUBLIC_SUPABASE_URL!,
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
{
cookies: {
getAll: () => cookieStore.getAll(),
setAll: (toSet) => {
try {
toSet.forEach(({ name, value, options }) => cookieStore.set(name, value, options))
} catch {
// called from a Server Component; the middleware/proxy refreshes the session
}
},
},
}
)
}
Use it in Server Components, Route Handlers and Server Actions so RLS applies to the signed-in user. The browser side uses createBrowserClient with the same two public values.
3. Auth redirect URLs
Dashboard → your project → Auth tab → set Site URL to your production domain and add these Redirect URLs, one per line:
https://recipes.example.com/**
https://*.vercel.app/**
http://localhost:3000/**
The wildcard line lets every preview deployment complete sign-in.
Things to know
- Queries go over HTTP. Vercel Functions can't open a Postgres connection to a SupaHost project, so use supabase-js rather than
pg, Prisma or Drizzle at runtime. HTTP suits serverless anyway: no connection pool to exhaust. - Pick nearby regions. Choose a SupaHost region close to your Vercel Functions region (for example Frankfurt with
fra1) to keep round trips short. - Previews and data. Preview deployments share your production project unless you point them elsewhere. On Pro and above, a branch gives previews their own copy.
FAQ
Do I need the Supabase Vercel integration?
No. Set the environment variables yourself; the values come from the Connect tab.
Does session refresh in middleware work?
Yes. @supabase/ssr works in Next.js middleware (called proxy from Next.js 16) to refresh sessions, since it only needs fetch and cookies.
Does Vercel's egress count against SupaHost?
Only responses from your SupaHost project count toward its egress quota (250 GB, 500 GB or 1 TB a month by plan). Traffic between Vercel and your users is Vercel's.