💾 Conexión a bases de datos (MongoDB / Prisma)

17 - 💾 Conexión a bases de datos (MongoDB / Prisma)

Aprende a conectar tu aplicación Next.js con bases de datos usando MongoDB y Prisma, y a realizar operaciones CRUD de manera segura y eficiente.

---

🔍 ¿Por qué usar MongoDB y Prisma?

• MongoDB: Base de datos NoSQL flexible y escalable, ideal para proyectos modernos.
• Prisma: ORM que simplifica la interacción con la base de datos y genera tipado seguro en TypeScript.

💡 Con Prisma y MongoDB puedes crear, leer, actualizar y eliminar datos fácilmente desde tus rutas API en Next.js.

Instalación:

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

---

⚙️ Configuración de Prisma

Inicializa Prisma en tu proyecto Next.js:

npx prisma init

Esto creará la carpeta prisma/ con un archivo schema.prisma donde definirás tu modelo de datos.

// prisma/schema.prisma
generator client {
  provider = "prisma-client-js"
}

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

model Usuario {
  id       String @id @map("_id") @default(auto()) @db.ObjectId
  nombre   String
  email    String @unique
  creadoEn DateTime @default(now())
}
      

---

🔗 Conexión y operaciones CRUD

En Next.js, podemos usar API Routes para manejar la comunicación con la base de datos.

// app/api/usuarios/route.js
import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

export async function GET() {
  const usuarios = await prisma.usuario.findMany();
  return new Response(JSON.stringify(usuarios), { status: 200 });
}

export async function POST(request) {
  const data = await request.json();
  const nuevoUsuario = await prisma.usuario.create({
    data: {
      nombre: data.nombre,
      email: data.email
    }
  });
  return new Response(JSON.stringify(nuevoUsuario), { status: 201 });
}
      

💡 Explicación:

• PrismaClient: Permite interactuar con la base de datos desde Next.js.
• findMany: Recupera todos los registros de la colección Usuario.
• create: Inserta un nuevo documento en MongoDB.
• API Routes: Proporcionan endpoints para manejar peticiones GET y POST.

---

📡 Probando la API

Podemos hacer peticiones desde el cliente usando fetch:

async function obtenerUsuarios() {
  const res = await fetch('/api/usuarios');
  const data = await res.json();
  console.log(data);
}

async function agregarUsuario() {
  const res = await fetch('/api/usuarios', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ nombre: "Jorge", email: "jorge@example.com" })
  });
  const data = await res.json();
  console.log(data);
}
      

---

✅ Resumen

• 💾 Prisma + MongoDB permite manejar datos de forma segura y tipada en Next.js.
• ⚡ Las API Routes funcionan como endpoints para operaciones CRUD.
• 🔗 Se integra fácilmente con fetch o librerías como Axios desde el frontend.
• 💡 Ideal para proyectos que necesitan persistencia de datos, autenticación o dashboards dinámicos.

← Volver al índice