Skip to Content
QuickstartsNext.js

Next.js

Build and query a ZXCV database from a Next.js App Router app, then ship it to the edge. You’ll end with a page that reads live data.

AI Assistance
Help me connect ZXCV to my Next.js App Router app. Do the following:
1. Install the @zxcv.build/sdk package.
2. Initialize a client with my project ref + anon key (from Settings → API), using Next.js env conventions (NEXT_PUBLIC_ prefix in .env.local).
3. Fetch rows from a "todos" table in a Server Component and render them idiomatically.
4. Keep the anon key on the client — authorization is enforced server-side by my policies.
Ask me for my project ref and anon key if I haven't given them.

Prefer to skip setup? npx create-zxcv-app@latest --template nextjs scaffolds this for you. The steps below show what it wires up.

Create a project

In the dashboard  click Start building, or run zxcv from your terminal. Open Settings → API and copy your project ref and anon key — the anon key is public and safe to ship, because access is enforced server-side by your authorization rules.

Create a table

In the SQL editor, create a todos table with a couple of rows:

create table todos (
  id          bigint generated always as identity primary key,
  title       text not null,
  is_complete boolean not null default false
);
insert into todos (title) values ('Read the docs'), ('Ship an app');

Install the SDK

bash npm install @zxcv.build/sdk

Initialize the client

Add your keys to .env.local. The NEXT_PUBLIC_ prefix exposes them to the browser, which is fine for the anon key:

.env.local
NEXT_PUBLIC_ZXCV_PROJECT=acme-store
NEXT_PUBLIC_ZXCV_ANON_KEY=your-anon-key

Create a shared client:

lib/zxcv.ts
import { createClient } from '@zxcv.build/sdk'
 
export const zxcv = createClient({
  project: process.env.NEXT_PUBLIC_ZXCV_PROJECT!,
  anonKey: process.env.NEXT_PUBLIC_ZXCV_ANON_KEY!,
})

Fetch and render

Read the data in a Server Component — it runs on the server, so nothing extra ships to the client:

app/page.tsx
import { zxcv } from '@/lib/zxcv'
 
export default async function Page() {
  const { data: todos } = await zxcv
    .from('todos')
    .select('id, title, is_complete')
    .order('id')
 
  return (
    <ul>
      {todos?.map((todo) => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  )
}

Need data in a Client Component (e.g. for Realtime)? Import the same client and call it inside useEffect or an event handler — the anon key is safe in the browser.

Deploy

Ship to the global edge from your terminal:

npm i -g zxcv
zxcv link acme-store
zxcv deploy --prod

Every push gets a preview URL; --prod promotes to your domain. See Deploy for custom domains and canaries.

Next steps

Getting startedVite (React)