mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 09:55:06 +03:00
## 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 -->
137 lines
5.4 KiB
Plaintext
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)
|