apps/ui-library/content/docs/nextjs/tanstack-db.mdx
A TanStack/db collection backed by Supabase. It wires up Supabase PostgREST queries, mutations, and real-time subscriptions so you get a reactive state that stays in sync with your Postgres database.
Enter your Supabase project credentials to generate a personalized installation command. The block will include schemas and collections for all tables in your database.
<TanstackDBGenerator /> <Callout type="info"> Your credentials are only used to fetch your database schema. They are not stored or sent to any server other than your Supabase project. </Callout>This block installs the following files:
| File | Description |
|---|---|
lib/schemas.ts | Zod schemas for all your database tables |
lib/db.ts | Supabase collections for type-safe CRUD operations |
lib/supabase/client.ts | Browser Supabase client |
lib/supabase/server.ts | Server-side Supabase client |
lib/supabase/middleware.ts | Middleware for session handling |
app/providers.tsx | Provider component for TanStack DB |
After installing the block, add the required environment variables to your .env.local file:
NEXT_PUBLIC_SUPABASE_URL=your-project-url
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=your-anon-key