import * as React from 'react'; import { useState } from 'react'; export default function DatabaseExample(): React.ReactElement { const [users, setUsers] = useState([]); const [loading, setLoading] = useState(false); const [connectionStatus, setConnectionStatus] = useState({ mongodb: 'No probado', supabase: 'No probado', firebase: 'No probado' }); // Ejemplo de conexión MongoDB const testMongoDB = async () => { setLoading(true); try { const response = await fetch('/api/database/mongodb-test', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ action: 'connect' }) }); const result = await response.json(); setConnectionStatus(prev => ({ ...prev, mongodb: response.ok ? 'Conectado' : 'Error' })); } catch (error) { setConnectionStatus(prev => ({ ...prev, mongodb: 'Error' })); } setLoading(false); }; // Ejemplo de conexión Supabase const testSupabase = async () => { setLoading(true); try { const response = await fetch('/api/database/supabase-test', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ action: 'connect' }) }); const result = await response.json(); setConnectionStatus(prev => ({ ...prev, supabase: response.ok ? 'Conectado' : 'Error' })); } catch (error) { setConnectionStatus(prev => ({ ...prev, supabase: 'Error' })); } setLoading(false); }; // Ejemplo de conexión Firebase const testFirebase = async () => { setLoading(true); try { const response = await fetch('/api/database/firebase-test', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ action: 'connect' }) }); const result = await response.json(); setConnectionStatus(prev => ({ ...prev, firebase: response.ok ? 'Conectado' : 'Error' })); } catch (error) { setConnectionStatus(prev => ({ ...prev, firebase: 'Error' })); } setLoading(false); }; return (

Ejemplos de Base de Datos

Ejemplos de conexión y uso de diferentes bases de datos soportadas por el template.

{/* Sección 1: Estado de conexiones */}

1. Estado de Conexiones

{/* MongoDB */}

MongoDB

{connectionStatus.mongodb}

Base de datos NoSQL con Mongoose ODM

MONGODB_URI=mongodb://localhost:27017/mydb
{/* Supabase */}

Supabase

{connectionStatus.supabase}

PostgreSQL con tipos TypeScript automáticos

NEXT_PUBLIC_SUPABASE_URL=https://...
{/* Firebase */}

Firebase

{connectionStatus.firebase}

Firestore con autenticación y real-time

NEXT_PUBLIC_FIREBASE_API_KEY=...
{/* Sección 2: Ejemplos de código */}

2. Ejemplos de Código

{/* MongoDB Example */}

MongoDB con Mongoose

{`// lib/db.js
import mongoose from 'mongoose';

const connectDB = async () => {
  try {
    await mongoose.connect(process.env.MONGODB_URI);
    console.log('MongoDB conectado');
  } catch (error) {
    console.error('Error conectando MongoDB:', error);
  }
};

// models/User.js
const userSchema = new mongoose.Schema({
  name: { type: String, required: true },
  email: { type: String, required: true, unique: true },
  createdAt: { type: Date, default: Date.now }
});

export const User = mongoose.models.User || mongoose.model('User', userSchema);

// pages/api/users.js
import { connectDB } from '@/lib/db';
import { User } from '@/models/User';

export default async function handler(req, res) {
  await connectDB();
  
  if (req.method === 'GET') {
    const users = await User.find();
    res.json(users);
  } else if (req.method === 'POST') {
    const user = await User.create(req.body);
    res.json(user);
  }
}`}
{/* Supabase Example */}

Supabase

{`// lib/supabase.js
import { createClient } from '@supabase/supabase-js';

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;

export const supabase = createClient(supabaseUrl, supabaseKey);

// components/UserList.tsx
import { useEffect, useState } from 'react';
import { supabase } from '@/lib/supabase';

export function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetchUsers();
  }, []);

  const fetchUsers = async () => {
    const { data, error } = await supabase
      .from('users')
      .select('*');
    
    if (data) setUsers(data);
  };

  const addUser = async (userData) => {
    const { data, error } = await supabase
      .from('users')
      .insert([userData]);
    
    if (data) fetchUsers();
  };

  return (
    

      {users.map(user => (
        
{user.name}

      ))}
    

  );
}`}
{/* Firebase Example */}

Firebase Firestore

{`// lib/firebase.js
import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
};

const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);

// components/FirebaseUsers.tsx
import { collection, addDoc, getDocs } from 'firebase/firestore';
import { db } from '@/lib/firebase';

export function FirebaseUsers() {
  const [users, setUsers] = useState([]);

  const fetchUsers = async () => {
    const querySnapshot = await getDocs(collection(db, 'users'));
    const usersData = querySnapshot.docs.map(doc => ({
      id: doc.id,
      ...doc.data()
    }));
    setUsers(usersData);
  };

  const addUser = async (userData) => {
    await addDoc(collection(db, 'users'), {
      ...userData,
      createdAt: new Date()
    });
    fetchUsers();
  };

  // Real-time listener
  useEffect(() => {
    const unsubscribe = onSnapshot(collection(db, 'users'), (snapshot) => {
      const usersData = snapshot.docs.map(doc => ({
        id: doc.id,
        ...doc.data()
      }));
      setUsers(usersData);
    });

    return () => unsubscribe();
  }, []);
}`}
{/* Sección 3: Comparación */}

3. Comparación de Características

Característica MongoDB Supabase Firebase
Tipo NoSQL Document PostgreSQL NoSQL Document
Real-time ❌ No nativo ✅ Sí ✅ Sí
Autenticación ❌ Externa ✅ Incluida ✅ Incluida
Tipos TypeScript ⚠️ Manual ✅ Automático ⚠️ Manual
Escalabilidad ✅ Excelente ✅ Muy buena ✅ Excelente
Costo 💰 Variable 💰 Freemium 💰 Freemium
{/* Información adicional */}

Configuración en .env.local:

MongoDB:

MONGODB_URI=mongodb://localhost:27017/mydb # o MongoDB Atlas: mongodb+srv://user:pass@cluster.mongodb.net/mydb

Supabase:

NEXT_PUBLIC_SUPABASE_URL=https://yourproject.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key

Firebase:

NEXT_PUBLIC_FIREBASE_API_KEY=your-api-key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=yourproject.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your-project-id
); }