TanStack Start

Introduction

This guide shows you how to use Prisma Next in a TanStack Start app. You scaffold a project where a server function queries your database and a route loader feeds it to the page, initialize the schema, and see your data.

Every command below was run end to end against a live Prisma Postgres database.

Quick start

One command scaffolds the project with Prisma Next wired in:

bunx create-prisma@next --template tanstack-start --provider postgres

Pick Prisma Postgres at the database prompt to have a database created for you, or paste your own DATABASE_URL.

Prerequisites

• Node.js v20.19 or later
• A PostgreSQL connection string, or nothing at all: the scaffold can create the database for you

1. Scaffold and enter the project

bunx create-prisma@next --template tanstack-start --provider postgres
cd my-app

The scaffold writes your connection string to .env, generates the TanStack Start app with Prisma Next wired in, installs dependencies, and emits the contract your queries are type-checked against.

2. Initialize and seed the database

bun run db:init
bun run db:seed

"summary": "Applied 5 operation(s) across 1 space(s), database signed"
Seeded 3 users.

db:init applies your schema (src/prisma/contract.prisma) to the database and signs it; the seed gives the first page something to show.

3. Run and verify

bun run dev

Open http://localhost

Where things live

• src/routes/index.tsx: the route: a createServerFn queries users, the loader passes them to the page
• src/prisma/users.ts: the query helper the server function calls
• src/prisma/db.ts: the Prisma Next client behind it

Model access is namespace-qualified on PostgreSQL: db.orm.public.User. The Prisma Next overview covers the contract-first model behind it.

Next steps

• Change the schema in src/prisma/contract.prisma, then run npm run contract:emit and npm run db:update.
• Learn the fundamentals: filtering, sorting, pagination, and writes.
• Read the Prisma Next overview for the concepts behind contracts and typed queries.