Cómo conectar Next.js con Supabase paso a paso

Next.js permite crear aplicaciones web modernas y Supabase proporciona una base de datos PostgreSQL, autenticación, almacenamiento y APIs listas para utilizar. Conectarlos es una excelente opción para desarrollar aplicaciones fullstack sin tener que construir todo el backend desde cero.

1. Crear el proyecto en Supabase

Primero entra en Supabase, crea una cuenta y selecciona New project. Define el nombre del proyecto, una contraseña para PostgreSQL y la región. Cuando termine la creación, tendrás acceso al panel de administración.

2. Crear una aplicación Next.js

Si todavía no tienes un proyecto, abre la terminal y ejecuta:

npx create-next-app@latest mi-app
cd mi-app
npm run dev

Después abre http://localhost:3000.

3. Instalar el cliente de Supabase

Dentro del proyecto instala la biblioteca oficial:

npm install @supabase/supabase-js

Esta biblioteca permitirá que Next.js se comunique con la API de Supabase.

4. Obtener las credenciales

En el panel de Supabase busca Project Settings → API. Allí encontrarás la URL del proyecto y la clave pública.

Crea un archivo .env.local:

NEXT_PUBLIC_SUPABASE_URL=tu_url
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=tu_clave

No publiques estas variables en GitHub. Además, nunca debes colocar una clave secreta o service_role en código que pueda llegar al navegador.

5. Crear el cliente

Puedes crear lib/supabase.js:

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

export const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL,
  process.env.NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY
)

6. Crear una tabla

Desde Table Editor crea, por ejemplo, una tabla llamada productos con columnas como:

• id
• nombre
• precio

Después agrega algunos registros de prueba.

7. Consultar los datos desde Next.js

En un Server Component puedes realizar una consulta:

import { supabase } from '@/lib/supabase'

export default async function Productos() {
  const { data, error } = await supabase
    .from('productos')
    .select('*')

  if (error) {
    return <p>Error al cargar productos</p>
  }

  return (
    <main>
      <h1>Productos</h1>

      {data.map((producto) => (
        <div key={producto.id}>
          <h2>{producto.nombre}</h2>
          <p>${producto.precio}</p>
        </div>
      ))}
    </main>
  )
}

8. Configurar la seguridad

Supabase utiliza Row Level Security (RLS) para controlar qué registros puede consultar o modificar cada usuario. En una aplicación real, no conviene dejar las tablas abiertas; debes crear políticas específicas para las operaciones permitidas.

La integración básica consiste en crear el proyecto en Supabase, instalar @supabase/supabase-js, configurar las variables de entorno, crear el cliente y consultar PostgreSQL desde Next.js. A partir de aquí puedes incorporar autenticación, formularios, almacenamiento de imágenes y operaciones CRUD para construir aplicaciones fullstack completas.