# 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.

Source: https://supahost.app/kb/nextjs-vercel · Updated 2026-11-11

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**):

```bash
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

```ts
// 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.

## Related

- [Use SupaHost with Next.js](/docs/getting-started/nextjs)
- [Auth in Next.js (App Router)](/docs/auth/nextjs)
- [Deploying your app on Vercel](/docs/integrations/vercel)
- [Troubleshooting Supabase Auth in Next.js](/kb/nextjs-auth-troubleshooting)