Introduction
Modern web development often involves integrating various technologies to create powerful and efficient applications. In this article, we will delve into the integration of trpc and Prisma within a Next.js project. tRPC is a technology that simplifies the process of remote procedure calls, while Prisma offers a robust and type-safe way to interact with databases. By combining these technologies, we'll create a seamless communication channel between the client and server, ensuring end-to-end type safety and efficient data handling.
Folder structure
.
├── prisma
│ └── [..]
├── src
│ ├── @types
│ │ ├── index.d.ts
│ ├── app
│ │ ├── layout.tsx
│ │ ├── page.tsx
│ ├── components
│ │ ├── CreateUserForm.tsx
│ ├── lib
│ │ ├── db.ts
│ ├── pages
│ │ ├── api
│ │ │ └── trpc
│ │ │ └── [trpc].ts
│ ├── server
│ │ ├── routers
│ │ │ ├── _app.ts
│ │ │ ├── user.ts
│ │ ├── validations
│ │ │ ├── base.ts
│ │ │ ├── user.ts
│ │ └── trpc.ts
│ └── utils
│ └── trpc-ssr.ts
│ └── trpc.ts
├── docker-compose.yml
└── [..]
Setting up the Database using Prisma
Containerizing the Database
To ensure a seamless and isolated database environment, opting for a Docker container is a strategic choice. Prior to configuring Prisma, let’s focus on setting up our Docker container. To achieve this, we’ll craft a docker-compose.yml file with the subsequent specifications:
version: "3"
services:
db:
image: postgres:14.1-alpine
ports:
- 5433:5432
container_name: /* your container name here */
environment:
POSTGRES_USER: /* your user here */
POSTGRES_PASSWORD: /* your password here */
POSTGRES_DB: /* your db here */
POSTGRES_HOST_AUTH_METHOD: trust
volumes:
- postgres_data_container:/var/lib/postgresql/data
volumes:
postgres_data_container:
driver: local
Once we’ve crafted this Docker configuration, take the next step by launching the Docker container. Here is the command we need to execute:
docker-compose up -d
This will set the stage for a streamlined and encapsulated database environment, allowing us to seamlessly proceed with the subsequent setup steps.
Installing Required Packages
Now, it’s time to setup Prisma. Let’s start by putting in place the essential tools that will drive our efforts. Open up the terminal and follow these steps:
yarn add prisma
yarn add @prisma/client
Initializing Prisma
Now, let’s tap into the impressive capabilities that Prisma has to offer. It’s time to dive into the core aspects. Here’s the command that we need to run in the terminal:
yarn prisma init
Database URL Setup
In the trustworthy .env file, it's time to introduce a customized URL that seamlessly fits with our database. Consider a URL similar to this:
DATABASE_URL="postgresql://user:pass@localhost:5433/mydb"
Configuring Prisma Schema
As we proceed, our focus shifts to configuring the schema.prisma file. Here, we'll establish a User model while also defining the destination for the generated files. By specifying the output location as ./generated, the Prisma files will be automatically created within the generated folder, situated within the prisma directory. Also, we’re setting up the Prisma client generator with the output directory for the generated files. The datasource block establishes the connection to the PostgreSQL database using the provided URL from the environment variables.
generator client {
provider = "prisma-client-js"
output = "./generated"
}
datasource db {
provider = "postgresql"
url = env("DATABASE_URL")
}
model User {
id Int @id @default(autoincrement())
name String
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}
Generating Prisma Client and Migrations
To get the Prisma client up and running and initiate the initial migration, simply execute the following commands:
yarn prisma generate
yarn prisma migrate dev --name init
Crafting an Instance of Prisma Client
Within the db.ts file situated in the lib folder, it's time to establish an instance of the Prisma Client. Here's how we can do it:
import { PrismaClient } from "../../prisma/generated";
const db = new PrismaClient();
export default db;
export * from "../../prisma/generated";
In this moment, our database becomes accessible in the tRPC. So, let’s put it to use!
