Level Up Your Next.js App: How to Use Prisma

Next.js is a developer's dream for building lightning-fast web applications. But data management? That's where things can get messy. Enter Prisma, a next-generation Object Relational Mapper (ORM) that bridges the gap between your code and your database with elegance and efficiency. And to make things even better, let's integrate it with Vercel Postgres, a serverless database offering by Vercel! Ready to take your Next.js skills to the next level? Let's dive into how to use Prisma like a pro, complete with code samples, powerful npx cli commands, and Vercel Postgres setup to turbocharge your workflow!

Install the Perfect Tools:

Next up, grab the Prisma Client package. This trusty sidekick connects your Next.js code to your schema. With it, you'll have superpowers for fetching, creating, updating, and deleting data with ease.

npm install prisma-client
npx prisma init --datasource-provider postgresql

Embrace the Schema:

The magic starts with a simple, human-readable schema file. This defines your data models, relationships, and even validation rules. Think of it as a blueprint for your database, written in plain English, not cryptic SQL!

[shcema.prisma]

model User {
  id        Int   @id @unique
  name      String
  email     String @unique
  posts     Post[]
}

model Post {
  id        Int   @id @unique
  title     String
  content   String
  author    User  @relation(fields: [authorId], references: [id])
  authorId  Int
}

Connect to Vercel Postgres:

Vercel Postgres makes setup a breeze. In your Vercel dashboard:

Create a database for your project.
Set the environment variable DATABASE_URL to the provided connection string.
Configure your Prisma config file with the Vercel Postgres connection details.

[.env]

POSTGRES_URL="value from vercel admin panel"
POSTGRES_PRISMA_URL="value from vercel admin panel"
POSTGRES_URL_NON_POOLING="value from vercel admin panel"
POSTGRES_USER="value from vercel admin panel"
POSTGRES_HOST="value from vercel admin panel"
POSTGRES_PASSWORD="value from vercel admin panel"
POSTGRES_DATABASE="value from vercel admin panel"

[schema.prisma]

datasource db {
  provider  = "postgresql"
  url       = env("POSTGRES_PRISMA_URL") // uses connection pooling
  directUrl = env("POSTGRES_URL_NON_POOLING") // uses a direct connection
}

Supercharge with npx cli:

Prisma's npx commands streamline your workflow:

  • npx prisma db push : Create your database schema based on your Prisma file within Vercel Postgres.
  • npx prisma migrate dev : Automatically migrate your schema within Vercel Postgres when you change your Prisma file.
  • npx prisma seed: Seed your database with initial data within Vercel Postgres using your Prisma schema.

Code with Confidence:

Prisma's type-safe API makes development a breeze. No more SQL struggles or typos. Prisma's generated types guide you every step of the way, ensuring accurate and efficient code.

// pages/index.js

import { PrismaClient } from "@prisma/client";

const prisma = new PrismaClient();

async function getUsers() {
  const users = await prisma.user.findMany();
  return users;
}

export default function Home() {
  const users = getUsers();

  return (
    <div>
      <h1>Users</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

Embrace the Power of Mutations and Queries:

Forget tedious SQL queries. Prisma provides a powerful high-level API for data interaction. Need all users with active subscriptions? Just write a simple Prisma query, and the magic happens behind the scenes within Vercel Postgres.

const activeUsers = await prisma.user.findMany({
  where: { subscription: { active: true } },
});

Need to create a new post with an existing author? Use a mutation, and Prisma handles the relationships and database updates within Vercel Postgres with ease.

const newPost = await prisma.post.create({
  data: {
    title: "My Awesome Post",
    content: "This is the best post ever!",
    author: {
      connect: { id: 1 }, // Connect to existing user with ID 1
    },
  },
});

Level Up with Advanced Features:

Prisma and Vercel Postgres offer a treasure trove of goodies:

  • Automatic migrations: Say goodbye to manual schema updates with Prisma's automatic migrations within Vercel Postgres.
  • Advanced relationships: Handle complex relationships with ease using Prisma's powerful relationship features.
  • Data introspection: Generate type-safe code directly from your database schema.
  • Serverless scalability: Enjoy the scalability and flexibility of Vercel Postgres for your Next.js app.

Stay in the Loop:

The Prisma and Vercel communities are vibrant and helpful. Don't hesitate to reach out or share your experiences. With tons of resources available, you'll always find support on your journey.

Related Posts