Files
Danny White 3b06c6c7cc fix(docs): unify docs card hover and retire IconPanel (#48379)
## What kind of change does this PR introduce?

Bug fix / docs UI polish.

## What is the current behavior?

- Many docs `GlassPanel`s use `background={false}`, so hover only tweaks
the border and reads as having no hover state
- Compact icon+label grids still use `IconPanel`, which has a broken
`-z-10` hover fill and overlaps with the newer `IconLink` pattern
- Description card grids jump to 3-up too early on medium widths

## What is the new behavior?

**GlassPanel**
- Removes the `background` prop; cards always use the filled surface
with stronger border hover
- Tightens icon→description gap (`gap-6` → `gap-3`)
- Decorative icons/logos use empty `alt` so screen readers don’t hear
the title twice

**Icon tiles**
- Retires `IconPanel` from docs and deletes it from `ui-patterns`
- Uses `IconLink` / `IconLinkList` for compact navigation tiles (auth
providers, social login, etc.)
- Adds `IconLinkButton` for SMS provider pickers (same chrome, opens a
dialog)
- Adds focus styles, list labelling, and dialog-trigger ARIA where
needed

**Layout / content**
- Migrate-to-Supabase description cards on resources use `GlassPanel`
(not slim icon tiles)
- Grid spans use `md:… xl:…` so cards stay 2-up until ~1280px
- Fixes migrate links to `/guides/platform/migrating-to-supabase/…` and
SSR quickstarts to `creating-a-client` with framework query params
- Moves the Extensions list `key` onto the outer `Link`

| Before | After |
| --- | --- |
| <img width="1185" height="1323" alt="Resources Supabase Docs"
src="https://github.com/user-attachments/assets/1677bf65-d3a3-4202-8c70-e758f7c3bcce"
/> | <img width="1185" height="1323" alt="Resources Supabase Docs"
src="https://github.com/user-attachments/assets/51760f0f-62b6-4010-9841-de26039f37b4"
/> |

## Additional context

Homepage compact sections already use `IconLinkList` from #48317; this
PR finishes that pattern for remaining docs `IconPanel` callsites and
cleans up GlassPanel hover.

`www/customers` only drops the removed `background` prop; those cards
already use the filled surface via `logo`.

## Test plan

- [ ] `/guides/getting-started`: GlassPanels show filled surface and
clearer border hover
- [ ] `/guides/resources`: migrate cards are GlassPanels with working
`/platform/…` links; 2-up until xl
- [ ] `/guides/auth/social-login` and auth providers partial: IconLink
tiles hover/focus correctly
- [ ] `/guides/auth/phone-login`: SMS provider buttons open dialogs;
keyboard focus works
- [ ] Docs homepage: migrate / self-host IconLinkLists unchanged in
behaviour
- [ ] `/guides/auth/server-side`: Next.js / SvelteKit cards resolve on
docs preview

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Improved Layouts**
* Made “GlassPanel” card grids more responsive and consistent; refined
card and success badge spacing for a cleaner presentation.
* **Updated Documentation**
* Refreshed multiple guide and resource pages (including quickstarts and
migration content) with standardized card layouts and updated link
destinations.
* **Component Updates**
* Standardized “GlassPanel” styling (background toggle removed) and
simplified icon-based panels; added an `IconLinkButton` for action
tiles; updated authentication provider grids to use the shared tile UI.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-07-31 06:34:05 +10:00

137 lines
5.4 KiB
Plaintext

---
id: 'serverless-drivers'
title: 'Serverless Drivers'
description: 'Connecting to your Postgres database in serverless environments.'
subtitle: 'Connecting to your Postgres database in serverless environments.'
---
Supabase provides several options for connecting to your Postgres database from serverless environments.
[supabase-js](/docs/reference/javascript/introduction) is an isomorphic JavaScript client that uses the [auto-generated REST API](/docs/guides/api) and therefore works in any environment that supports HTTPS connections. This API has a built-in [connection pooler](/docs/guides/database/connecting-to-postgres#poolers) and can serve thousands of simultaneous requests, and therefore is ideal for Serverless workloads.
## Vercel Edge Functions
Vercel's [Edge runtime](https://vercel.com/docs/functions/runtimes/edge-runtime) is built on top of the [V8 engine](https://v8.dev/), that provides a limited set of Web Standard APIs.
### Quickstart
Choose one of these Vercel Deploy Templates which use our [Vercel Deploy Integration](https://vercel.com/integrations/supabase) to automatically configure your connection strings as environment variables on your Vercel project!
<div>
<div className="grid grid-cols-12 gap-6 not-prose">
<Link
href="https://supabase.link/nextjs-with-supabase-starter"
className="col-span-12 md:col-span-6 xl:col-span-4"
passHref
>
<GlassPanel title="supabase-js" hasLightIcon={true} showIconBg={true}>
A Next.js App Router template configured with cookie-based auth using Supabase, TypeScript
and Tailwind CSS.
</GlassPanel>
</Link>
<Link
href="https://supabase.link/nextjs-supabase-kysely"
className="col-span-12 md:col-span-6 xl:col-span-4"
passHref
>
<GlassPanel title="Kysely" hasLightIcon={true} showIconBg={true}>
Basic Next.js template that uses Supabase as the database and Kysely as the query builder.
</GlassPanel>
</Link>
</div>
</div>
### Manual configuration
In your [`Database Settings`](/dashboard/project/_?showConnect=true&method=transaction) and copy the URI from the `Transaction pooler` section and save it as the `POSTGRES_URL` environment variable. Remember to replace the password placeholder with your actual database password and add the following suffix `?workaround=supabase-pooler.vercel`.
```txt .env.local
POSTGRES_URL="postgres://postgres.cfcxynqnhdybqtbhjemm:[YOUR-PASSWORD]@aws-0-ap-southeast-1.pooler.supabase.com:6543/postgres?workaround=supabase-pooler.vercel"
```
<Tabs scrollable defaultActiveId="drizzle" type="underlined" size="small">
<TabPanel id="drizzle" label="Drizzle">
```ts lib/drizzle.ts
import { sql } from '@vercel/postgres'
import { InferInsertModel, InferSelectModel } from 'drizzle-orm'
import { pgTable, serial, text, timestamp, uniqueIndex } from 'drizzle-orm/pg-core'
import { drizzle } from 'drizzle-orm/vercel-postgres'
export const UsersTable = pgTable(
'users',
{
id: serial('id').primaryKey(),
name: text('name').notNull(),
email: text('email').notNull(),
image: text('image').notNull(),
createdAt: timestamp('createdAt').defaultNow().notNull(),
},
(users) => {
return {
uniqueIdx: uniqueIndex('unique_idx').on(users.email),
}
}
)
export type User = InferSelectModel<typeof UsersTable>
export type NewUser = InferInsertModel<typeof UsersTable>
// Connect to Vercel Postgres
export const db = drizzle(sql)
```
</TabPanel>
<TabPanel id="kysely" label="Kysely">
```ts lib/kysely.ts
import { createKysely } from '@vercel/postgres-kysely'
import { ColumnType, Generated } from 'kysely'
interface UserTable {
// Columns that are generated by the database should be marked
// using the `Generated` type. This way they are automatically
// made optional in inserts and updates.
id: Generated<number>
name: string
email: string
image: string
// You can specify a different type for each operation (select, insert and
// update) using the `ColumnType<SelectType, InsertType, UpdateType>`
// wrapper. Here we define a column `createdAt` that is selected as
// a `Date`, can optionally be provided as a `string` in inserts and
// can never be updated:
createdAt: ColumnType<Date, string | undefined, never>
}
// Keys of this interface are table names.
export interface Database {
users: UserTable
}
export const db = createKysely<Database>()
export { sql } from 'kysely'
```
</TabPanel>
</Tabs>
## Cloudflare Workers
Cloudflare's Workers runtime also uses the [V8 engine](https://v8.dev/) but provides polyfills for a subset of Node.js APIs and [TCP Sockets API](https://developers.cloudflare.com/workers/runtime-apis/tcp-sockets/), giving you a couple of options:
- [supabase-js](https://developers.cloudflare.com/workers/databases/native-integrations/supabase/)
- [Postgres.js](https://github.com/porsager/postgres?tab=readme-ov-file#cloudflare-workers-support)
- [node-postgres](https://developers.cloudflare.com/workers/tutorials/postgres/)
## Supabase Edge Functions
Supabase Edge Functions uses the [Deno runtime](https://deno.com/) which has native support for TCP connections allowing you to choose your favorite client:
- [supabase-js](/docs/guides/functions/connect-to-postgres#using-supabase-js)
- [Deno Postgres driver](/docs/guides/functions/connect-to-postgres#using-a-postgres-client)
- [Postgres.js](https://github.com/porsager/postgres)
- [Drizzle](/docs/guides/functions/connect-to-postgres#using-drizzle)