Quick Start

Installation

Install the runtime packages:

npm install @prisma-next-idb/client-idb @prisma-next/migration-tools

Install the dev tools:

npm install --save-dev prisma-next @prisma-next/contract \
  @prisma-next-idb/family-idb @prisma-next-idb/target-idb \
  @prisma-next-idb/adapter-idb @prisma-next-idb/driver-idb

Schema

Create src/prisma/schema.prisma. No generator block is needed.

model User {
  id    String  @id
  name  String
  email String? @unique
  todos Todo[]
}

model Todo {
  id     String  @id
  title  String
  done   Boolean
  userId String
  user   User    @relation(fields: [userId], references: [id], onDelete: Cascade)
}

Configure

Create prisma-next.config.ts:

import { defineConfig } from "@prisma-next-idb/family-idb/config-types";
import { prismaIdbContract } from "@prisma-next-idb/family-idb/contract-psl";
import idbFamily from "@prisma-next-idb/family-idb/control";
import idbTarget from "@prisma-next-idb/target-idb/control";
import idbAdapter from "@prisma-next-idb/adapter-idb/control";
import idbDriver from "@prisma-next-idb/driver-idb/control";

export default defineConfig({
  family: idbFamily,
  target: idbTarget,
  adapter: idbAdapter,
  driver: idbDriver,
  db: { connection: ":memory:" },
  contract: prismaIdbContract("src/prisma/schema.prisma"),
  migrations: { dir: "migrations" },
});

Bootstrap

Both CLIs are devDependencies, so npx resolves them locally. Run once on a fresh project:

npx prisma-next contract emit
npx prisma-next-idb migration plan
npx prisma-next-idb migration contract-space
npx prisma-next-idb migration preflight

This writes contract.json, contract.d.ts, contract-space.generated.ts, and the first migration package under migrations/app/. Commit all of them.

prisma-next-idb reads --contract/--migrations-dir from prisma-next.config.ts (contract.output / migrations.dir) — the same config prisma-next contract emit reads — so no flags are needed here even though this example keeps its contract under src/prisma/ rather than the src/lib/prisma/ most examples use. Pass --contract/--migrations-dir/--config explicitly only if you need to point at something other than what the config declares.

Open the client

Create src/db.ts:

import { createAutoMigratingIdbClient } from "@prisma-next-idb/client-idb/client-auto";
import type { IdbClient } from "@prisma-next-idb/client-idb/client-auto";
import type { Contract } from "./prisma/contract";
import { contractSpace } from "./prisma/contract-space.generated";

type Db = IdbClient<Contract>;

let db: Promise<Db> | null = null;

export function getDb(): Promise<Db> {
  return (db ??= createAutoMigratingIdbClient({ contractSpace, dbName: "my-app" }));
}

createAutoMigratingIdbClient applies any pending migrations before resolving. Call getDb() from browser code whenever you need the client.

Installation

Schema

Configure

Bootstrap

Open the client

Next

Schema & Config

Migrations

Client

Querying

On this page