Conectar Supabase con un frontend de Next.js es el puente que transforma tu base de datos en una aplicación viva. En esta guía vas a clonar un repositorio listo para SuplatziGram, instalar dependencias, configurar variables de entorno y crear el cliente de Supabase para empezar a consumir datos reales.

¿Cómo clonar el repositorio de frontend para Supabase?

El punto de partida es un repo ya preparado para que no escribas el frontend desde cero. Solo lo clonas y te enfocas en la conexión.

• Abre el link del repositorio que aparece en la sección de recursos.
• Copia la URL (puedes usar SSH o HTTPS, según tu preferencia).
• En la terminal ejecuta git clone dentro de la carpeta donde trabajas.
• Entra a la carpeta Supabase Fundamentos y ábrela en tu editor.

Una vez dentro, cambia de rama para situarte en el punto exacto de la clase. Con git checkout clase-12-inicio quedas parado en el repo base que trae componentes, mocks, página de crear post, página de rank, utilidades y homepage listos para explorar [02:15].

¿Qué hace git checkout a una rama específica? Te mueve a esa rama y carga su versión del código. Sirve para trabajar sobre un punto de partida controlado, distinto al main.

¿Cómo instalar dependencias y correr el proyecto en local?

Antes de ver el frontend funcionando necesitas instalar las librerías que el proyecto usa. Aquí entra Node con su gestor de paquetes.

Ejecuta npm install para que se descarguen todas las dependencias declaradas en el package.json. Cuando termine, levanta el servidor de desarrollo con npm run dev y abre localhost:3000 en tu navegador [03:20].

Lo que vas a ver es SuplatziGram con data mockeada: un avatar, el nombre del creador, el tiempo desde la publicación gracias a la utilidad getTimeAgo, una imagen, el contador de likes y el caption. También hay una página de crear post y una página de rank que ordena los posteos más populares en orden descendente por likes.

¿Qué trae el código del repositorio?

La página de rank importa el componente Image de Next.js, useState de React, la función getTimeAgo desde utils y los posts mockeados desde la carpeta mocks. También incluye el componente del corazón para dar like, una modal para abrir el post en desktop y una grilla con el listado de elementos.

El Postcard es el componente que se renderiza en el feed principal, y el Bottom Navigation es la barra inferior que permite saltar entre páginas. La página de crear post por ahora solo tiene estructura, sin funcionalidad, eso lo construyes en clases siguientes.

¿Cómo configurar las variables de entorno de Supabase en Next.js?

Las credenciales nunca van hardcoded en el código. Para eso existe el archivo .env, donde guardas la URL del proyecto y la anon key de forma segura.

• Renombra el archivo env.example a .env.
• Entra al panel de Supabase y abre Project Overview.
• Haz clic en el botón Connect de la barra superior.
• En la sección App Frameworks elige Next.js con App Router.
• Copia el bloque con la URL y la anon key, pégalo en tu .env [05:40].

¿Qué es la anon key de Supabase? Es una clave pública que permite a tu frontend hablar con Supabase respetando las reglas de Row Level Security. No da acceso de administrador, solo lo que tus políticas permitan.

Con esos dos valores guardados ya tienes lo necesario para que el cliente sepa a qué proyecto conectarse y con qué identidad.

¿Cómo crear el cliente de Supabase en el frontend?

El cliente es el objeto que tu app usa para hacer consultas, insertar registros, leer storage o suscribirse a cambios en tiempo real. Supabase ofrece librerías oficiales en varios lenguajes y nosotros usamos la de JavaScript.

Desde la documentación de la REST API copias el comando de instalación. Detén el servidor de desarrollo y ejecuta el comando en tu terminal para sumar la librería @supabase/supabase-js al proyecto [07:10].

Después, crea un archivo client.ts dentro de la carpeta utils con esta lógica:

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

const SUPABASE_URL = process.env.NEXT_PUBLIC_SUPABASE_URL! const SUPABASE_ANON_KEY = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!

export const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY)

Lo que pasa aquí es directo: importas la función createClient de la librería, le pasas la URL y la anon key desde tus variables de entorno y exportas la constante supabase. Con esa exportación, cualquier página o función del proyecto puede importar el cliente y consumir datos sin reconfigurar nada.

¿Por qué exportar el cliente desde un único archivo? Porque centralizas la conexión. Si cambias credenciales o agregas configuración, la modificas en un solo lugar y todo el proyecto la usa.

Qué viene después con tu frontend conectado a Supabase

Con el repositorio clonado, las dependencias instaladas, el .env configurado y el cliente exportado, tu frontend ya está listo para hablar con la base de datos real. En las próximas clases vas a leer posts desde Supabase, mostrar las imágenes alojadas en storage y construir el feed completo de SuplatziGram con datos vivos.

¿Ya tienes tu proyecto corriendo en localhost:3000? Cuéntame en los comentarios qué parte de la configuración te dio más vueltas.