Tutorial Corto: CRUD en Next.js con Prisma y PostgreSQL

Aprende a crear una aplicación con Next.js, Prisma y PostgreSQL usando TypeScript como lenguaje de programación para todo el proyecto web. En este artículo te mostraré cómo crear un CRUD completo, desde la configuración hasta el consumo de la API en el frontend, de forma sencilla y práctica.

Requerimientos

Antes de empezar, necesitas tener instalado Node.js y una base de datos SQL. Para este ejemplo, puedes usar PostgreSQL o simplemente SQLite3 si quieres algo sencillo para pruebas locales. Te recomiendo también instalar la extensión oficial de Prisma para Visual Studio Code para una mejor experiencia.

Lo primero es crear un nuevo proyecto con Next.js y TypeScript. Abre tu terminal y ejecuta:

npx create-next-app@latest nextjs-crud --typescript
cd nextjs-crud

Luego, instala Prisma y el cliente correspondiente para la base de datos que usarás:

npm install prisma @prisma/client

Si decides usar PostgreSQL:

npm install pg

Inicializa Prisma en tu proyecto para que se genere la configuración básica:

npx prisma init

Esto creará una carpeta /prisma y un archivo .env donde deberás configurar la conexión a tu base de datos. Abre el archivo .env y coloca tu cadena de conexión. Por ejemplo, para PostgreSQL sería algo así:

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

Si decides usar SQLite3 para pruebas, solo necesitas:

DATABASE_URL="file:./dev.db"

Ahora, edita el archivo prisma/schema.prisma para definir tu modelo de datos. Un modelo básico podría lucir así:

model Post {
  id        Int      @id @default(autoincrement())
  title     String
  content   String?
  createdAt DateTime @default(now())
}

Después, crea la primera migración para que la estructura del modelo se refleje en la base de datos:

npx prisma migrate dev --name init

Con esto ya tienes la base lista y puedes empezar a crear los endpoints de la API usando Next.js. Dentro de la carpeta /pages/api/posts/, crea el archivo index.ts para manejar las operaciones de obtener y crear posts:

import { PrismaClient } from '@prisma/client'
import type { NextApiRequest, NextApiResponse } from 'next'

const prisma = new PrismaClient()

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method === 'GET') {
    const posts = await prisma.post.findMany()
    return res.json(posts)
  }

  if (req.method === 'POST') {
    const { title, content } = req.body
    const post = await prisma.post.create({
      data: { title, content },
    })
    return res.status(201).json(post)
  }

  res.status(405).json({ message: 'Método no permitido' })
}

Para operaciones con un post individual (obtener, actualizar y eliminar), crea el archivo /pages/api/posts/[id].ts con el siguiente contenido:

import { PrismaClient } from '@prisma/client'
import type { NextApiRequest, NextApiResponse } from 'next'

const prisma = new PrismaClient()

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  const { id } = req.query

  if (req.method === 'GET') {
    const post = await prisma.post.findUnique({ where: { id: Number(id) } })
    return res.json(post)
  }

  if (req.method === 'PUT') {
    const { title, content } = req.body
    const post = await prisma.post.update({
      where: { id: Number(id) },
      data: { title, content },
    })
    return res.json(post)
  }

  if (req.method === 'DELETE') {
    await prisma.post.delete({ where: { id: Number(id) } })
    return res.status(204).end()
  }

  res.status(405).json({ message: 'Método no permitido' })
}

Ahora ya tienes lista la API básica de tu CRUD. El siguiente paso es consumir esta API desde el frontend de tu aplicación Next.js. Un ejemplo sencillo para obtener y mostrar los posts sería usando el hook useEffect de React:

useEffect(() => {
  fetch('/api/posts')
    .then(res => res.json())
    .then(data => setPosts(data))
}, [])

¡Listo! Ya tienes tu CRUD funcional con Next.js, Prisma y PostgreSQL o SQLite, todo usando TypeScript. Ahora puedes seguir agregando funcionalidades o personalizando la lógica según tus necesidades.