Prisma + tRPC

Prisma + tRPC is a starter repository (boilerplate) that combines Next.js, tRPC, and Prisma for building full-stack React applications with end-to-end type safety.

What is Prisma + tRPC?

This is a starter repository from the official tRPC examples, created by @alexdotjs, for full-stack React development. It uses Next.js as the framework, tRPC for end-to-end typesafe APIs, Prisma as the ORM with a Postgres database, and includes a full testing setup with Playwright for E2E and Vitest for unit tests. The starter takes your Prisma schema and tRPC routers as input and produces a production-ready app with CI, environment validation, and Render deployment configuration.

Key Features

• End-to-end typesafety with tRPC — API calls are typed from server to client, so type mismatches are caught at compile time.
• Full-stack React with Next.js — Uses the Next.js pages API route at src/pages/api/trpc/[trpc].ts as the tRPC response handler.
• Prisma + Postgres — The Prisma schema lives in prisma/schema.prisma; the pnpm dx command starts Postgres, applies migrations, and seeds the database.
• CI with GitHub Actions — The workflow runs Playwright E2E tests and ESLint linting on every push.
• Environment variable validation — Env vars are validated on next build and when the app starts.
• Render Blueprint deployment — A render.yaml Blueprint lets you deploy the app and database automatically from the Render dashboard.
• Scripted build and test workflow — pnpm build runs prisma generate, prisma migrate, then next build; separate scripts run unit (test-unit), E2E (test-e2e), and complete tests (test-start).

Who is it for?

• TypeScript full-stack developers — Use this starter to skip the boilerplate of wiring Next.js, tRPC, and Prisma together and start with a working, type-safe base.
• Teams that value testing — The starter comes with Playwright E2E tests, Vitest unit tests, and a GitHub Actions workflow, so you can enforce quality from the first commit.
• Developers deploying to Render — The included Blueprint automatically provisions a Postgres database and web service, so you don't need to configure infrastructure manually.

What can you do with it?

• Build a type-safe CRUD application — Define models in prisma/schema.prisma, expose queries and mutations in src/server/routers, and call them from React components with full type inference.
• Set up CI for a new project — Push the repo to GitHub and the included Actions workflow will run linting and Playwright E2E tests.
• Deploy a full-stack app quickly — Connect your repo to Render's Blueprint dashboard and the app plus database are deployed together using render.yaml.

How does it work?

1. Scaffold with pnpm create next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-starter.
2. Run pnpm dx to start Postgres, run migrations, seed, and start the Next.js dev server.
3. Modify the Prisma schema and tRPC routers, then build (pnpm build) or test (pnpm test-e2e) your changes.

FAQ

What are the requirements to use this starter?

You need Node.js 18.0.0 or higher and a Postgres database. The dx script can start a local Postgres instance for development.

Does the template include a styling solution?

No. The starter focuses on the API layer with tRPC and Prisma and does not include Tailwind, styled-components, or any other CSS framework.

How do I reset the database?

Run pnpm db-reset to reset the local database to a clean state.

Is this template free to use?

Yes, it's an open-source example from the tRPC repository, so you can freely use and modify it.