Cómo conectar Next.js con Prisma y PostgreSQL

Cuando desarrollamos aplicaciones con Next.js, necesitamos una forma sencilla y segura de trabajar con bases de datos. Una combinación muy utilizada es Prisma ORM junto con PostgreSQL, ya que permite consultar y modificar datos utilizando TypeScript en lugar de escribir constantemente SQL.

1. Crear el proyecto Next.js

Primero creamos una aplicación:

npx create-next-app@latest mi-app
cd mi-app

Después instalamos Prisma:

npm install prisma @prisma/client
npx prisma init

Esto crea la carpeta prisma y un archivo .env.

2. Configurar PostgreSQL

En .env debemos definir la conexión con nuestra base de datos:

DATABASE_URL="postgresql://usuario:contraseña@localhost:5432/mi_basedatos"

La URL contiene el usuario, contraseña, servidor, puerto y nombre de la base de datos.

En prisma/schema.prisma configuramos PostgreSQL:

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

3. Crear nuestro modelo

Ahora podemos definir las tablas mediante modelos Prisma. Por ejemplo, para una aplicación de usuarios:

model Usuario {
  id        Int      @id @default(autoincrement())
  nombre    String
  email     String   @unique
  creadoEn  DateTime @default(now())
}

Prisma utiliza este modelo para representar la estructura de nuestra tabla.

4. Crear la migración

Guardamos los cambios en PostgreSQL mediante:

npx prisma migrate dev --name crear_usuario

Esto genera una migración y actualiza la base de datos.

Después podemos generar el cliente de Prisma:

npx prisma generate

5. Crear la conexión con Prisma

Es recomendable crear un único cliente reutilizable. Por ejemplo, lib/prisma.ts:

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

const prisma = new PrismaClient();

export default prisma;

Ahora podemos utilizar Prisma desde nuestros Server Components, Server Actions o Route Handlers.

6. Consultar datos

Por ejemplo:

import prisma from "@/lib/prisma";

const usuarios = await prisma.usuario.findMany();

Para crear un usuario:

const usuario = await prisma.usuario.create({
  data: {
    nombre: "Johan",
    email: "johan@email.com"
  }
});

También podemos buscar un registro específico:

const usuario = await prisma.usuario.findUnique({
  where: {
    email: "johan@email.com"
  }
});

7. Prisma Studio

Prisma incluye una herramienta visual para consultar y modificar los datos:

npx prisma studio

Esto facilita comprobar que nuestras tablas y registros funcionan correctamente.

Conclusión

La combinación Next.js + Prisma + PostgreSQL permite construir aplicaciones fullstack modernas con una estructura clara. Next.js se encarga de la aplicación y el servidor, Prisma facilita el acceso a los datos y PostgreSQL proporciona una base de datos robusta. Además, las migraciones permiten mantener controlada la evolución de la estructura de nuestra aplicación.