MongoDB + Mongoose paso a paso: ponle base de datos a tu web Next.js

¿Recuerdas la web estática que levantamos con Next.js y Tailwind? Hoy le daremos memoria permanente. Aprenderás a conectar con MongoDB y a manejar datos con Mongoose como si fuera una charla entre colegas.

¿Por qué MongoDB? Es una base de datos NoSQL que almacena documentos en formato similar a JSON. Perfecta para JavaScript porque no hay fricción entre el formato de tus datos en el backend y en la base de datos.

Paso 1: Crear cuenta en MongoDB Atlas. Atlas es el servicio cloud de MongoDB. Ofrece un tier gratuito perfecto para desarrollo y proyectos pequeños. Crea un cluster, añade un usuario y obtén tu connection string.

Paso 2: Instalar Mongoose. Mongoose es un ODM (Object Document Mapper) que nos permite definir esquemas y modelos para nuestros datos:

$ npm install mongoose

También añadimos las variables de entorno con la URI de conexión.

Paso 3: Crear la conexión. En Next.js con App Router, creamos un archivo lib/mongodb.ts que gestiona la conexión. Importante: cachear la conexión para no crear múltiples conexiones en desarrollo con hot reload.

// lib/mongodb.ts
import mongoose from 'mongoose';

const MONGODB_URI = process.env.MONGODB_URI!;

let cached = global.mongoose;

if (!cached) {
  cached = global.mongoose = { conn: null, promise: null };
}

export async function connectDB() {
  if (cached.conn) return cached.conn;
  
  if (!cached.promise) {
    cached.promise = mongoose.connect(MONGODB_URI);
  }
  
  cached.conn = await cached.promise;
  return cached.conn;
}

Paso 4: Definir modelos. Un modelo en Mongoose define la estructura de tus documentos. Por ejemplo, para posts de blog: título (String, required), contenido (String), fecha (Date, default: now), autor (String).

// models/Post.ts
import mongoose from 'mongoose';

const postSchema = new mongoose.Schema({
  title: { type: String, required: true },
  content: { type: String, required: true },
  author: String,
  createdAt: { type: Date, default: Date.now }
});

export default mongoose.models.Post || mongoose.model('Post', postSchema);

Paso 5: Operaciones CRUD. Create: Model.create(data). Read: Model.find() o Model.findById(id). Update: Model.findByIdAndUpdate(id, data). Delete: Model.findByIdAndDelete(id). Todas devuelven Promises.

Paso 6: Server Components y Server Actions. En Next.js 14 puedes hacer queries directamente en Server Components. También puedes usar Server Actions para mutaciones desde el cliente sin crear API routes.

Errores comunes: Olvidar await en operaciones async. No manejar errores con try/catch. Conexiones duplicadas en desarrollo. Schemas sin validación.

Ahora tu aplicación tiene memoria permanente. Los datos persisten entre reinicios y puedes escalar horizontalmente cuando tu proyecto crezca.