Introducción a Supabase

¿Qué es Supabase?

Supabase es una alternativa de código abierto a Firebase que ofrece todos los servicios backend que necesitas para construir aplicaciones modernas. Está construido sobre PostgreSQL y brinda una base de datos potente, autenticación, suscripciones en tiempo real, almacenamiento y Edge Functions.

Supabase vs Firebase

Funciones principales

Configurar tu primer proyecto

Paso 1: Crear una cuenta de Supabase

Visita supabase.com y regístrate con GitHub o email.

Paso 2: Crear un nuevo proyecto

Haz clic en "New Project" y configura:

• Nombre del proyecto
• Contraseña de base de datos (¡guárdala de forma segura!)
• Región (elige la más cercana a tus usuarios)

Paso 3: Instalar el cliente de Supabase

# Using npm
npm install @supabase/supabase-js

# Using yarn
yarn add @supabase/supabase-js

Paso 4: Inicializar el cliente

import { createClient } from '@supabase/supabase-js'

const supabaseUrl = 'https://your-project.supabase.co'
const supabaseKey = 'your-anon-key'

export const supabase = createClient(supabaseUrl, supabaseKey)

Tu primera consulta

// Fetch all rows from a table
const { data, error } = await supabase
  .from('posts')
  .select('*')

if (error) {
  console.error('Error:', error)
} else {
  console.log('Posts:', data)
}

Estructura del proyecto

my-supabase-app/
├── src/
│   ├── lib/
│   │   └── supabase.js      # Supabase client
│   ├── components/
│   └── pages/
├── .env.local               # Environment variables
└── package.json

Variables de entorno

# .env.local
NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key