/trpc-app-router

A Next.js Template for using tRPC with Next.js's App Router.

Primary LanguageTypeScript

This is a Next.js Template for using tRPC with Next 13's App Router.

It's a simple CRUD app using a Postgres Database (through Prisma) running in a Docker container. It uses tRPC's Fetch Adapter with Next's Route Handlers to host tRPC. It also handles requests with tRPC's React Query Wrapper.

Note that the .env file holds the database URL.

Setup

First, run the database server:

docker compose up -d

This installs the PostgreSQL Image and spins up a container with a volume.

Next, set up the database by running migrations, and start the development server:

npx prisma migrate dev
npm run dev

Alternatively, run migrations and start the server using:

npm run dev:migrate

This starts a server listening at http://localhost:3000.

Why?

As of creating this repo, tRPC's Next.js adapter only works with the Pages Router. I wanted a simple template to refer to whenever I used tRPC with Next.js projects that use the App Router.