Интеграция Prisma в проект Next.js

Prisma — это современный ORM-инструмент, который упрощает работу с базами данных. Он отлично подходит для проектов на Next.js благодаря своей типобезопасности, удобному синтаксису и поддержке TypeScript. В этом руководстве мы рассмотрим, как правильно интегрировать Prisma в проект на Next.js, создать модели, выполнить миграции и использовать Prisma в API-роутах.

Установка зависимостей

Первым делом установите Prisma и клиентскую библиотеку:

npm install prisma --save-dev
npm install @prisma/client

Затем инициализируйте Prisma:

npx prisma init

Эта команда создаст папку prisma/ с файлом schema.prisma и файл .env для хранения конфигурации базы данных.

Настройка подключения к базе данных

Откройте файл .env и укажите строку подключения к базе данных. Пример для PostgreSQL:

DATABASE_URL="postgresql://user:password@localhost:5432/mydb"

В файле schema.prisma укажите тип базы и создайте модели, например, User:

generator client {
  provider = "prisma-client-js"
}
 
datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}
 
model User {
  id        Int      @id @default(autoincrement())
  email     String   @unique
  name      String?
  createdAt DateTime @default(now())
}

После этого выполните миграцию:

npx prisma migrate dev --name init

Теперь база данных будет создана с таблицей User, а Prisma сгенерирует типизированный клиент.

Использование Prisma в API-роутах

Создайте API-роут в pages/api/users.ts:

import { PrismaClient } from "@prisma/client";
const prisma = new PrismaClient();
 
export default async function handler(req, res) {
  if (req.method === "GET") {
    const users = await prisma.user.findMany();
    res.status(200).json(users);
  } else if (req.method === "POST") {
    const { email, name } = req.body;
    const user = await prisma.user.create({
      data: { email, name },
    });
    res.status(201).json(user);
  } else {
    res.status(405).end();
  }
}

Теперь вы сможете выполнять GET-запросы для получения пользователей и POST-запросы для добавления новых.

Организация и повторное использование клиента

Создаем клиент Prisma один раз для дальнейшего переиспользования. Пропишите в файле lib/prisma.ts:

const globalForPrisma = global as unknown as { prisma: PrismaClient };
 
export const prisma = globalForPrisma.prisma || new PrismaClient();
 
if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma;

Теперь импортируйте клиент из lib/prisma.ts в любых роутерах или функциях.

Использование с React Server Components

Если вы используете Next.js App Router (app/), Prisma может работать и с серверными компонентами. Просто импортируйте клиент и делайте запросы напрямую в server-функциях или getServerSideProps.

Например, сделаем страницу app/users/page.tsx:

import { prisma } from "@/lib/prisma";
 
export default async function UsersPage() {
  const users = await prisma.user.findMany();
  return (
    <ul>
      {users.map((u) => (
        <li key={u.id}>{u.email}</li>
      ))}
    </ul>
  );
}

Заключение

Prisma делает работу с базами данных в Next.js проще и безопаснее. Типобезопасные запросы, генерация миграций и удобство интеграции делают его отличным выбором как для небольших проектов, так и для production-систем. Обязательно оборачивайте клиент в singleton, следите за структурой проекта и не забывайте запускать миграции.