Crear posts reales con Supabase y Next.js

Crear posts reales con Supabase es directo cuando comprendes el flujo completo: subir la imagen al storage, obtener su URL pública y guardar el registro en la tabla. Aquí verás cómo hacerlo desde la API, el dashboard y el front end con Supabase JS y Next.js, además de cómo resolver errores de seguridad con row level security.

¿Cómo crear posts reales con Supabase desde API, dashboard y front end?

La prioridad es entender que todo lo que insertes por API se refleja en el dashboard y luego se renderiza en el front end como un feed con imagen y caption. Las barras verdes del dashboard muestran actividad reciente, útil para seguir las analíticas.

• Desde el dashboard: subir la imagen al storage y obtener su URL.
• Con HTTPie: enviar un POST con headers API key y authorization.
• Body mínimo: objeto con user ID e image URL.
• Respuesta esperada: 201 creado al ejecutar el request.
• Verificación: en el editor de tabla, el nuevo registro aparece con caption vacío, likes en 0 y timestamps de creado/actualizado automáticos.
• Diferencia del nombre de imagen: puede venir del nombre del archivo, no del patrón numerado previo.
• Conteo de posts: ahora hay uno más que antes, listo para ser consumido por la API o el front end.

¿Qué aporta Supabase JS en el front end?

• Automatiza el flujo: subir al storage, obtener URL y hacer el insert en la tabla en un solo proceso.
• Permite publicar desde una interfaz real: carga de imagen, caption y botón de publicar.
• Renderiza el feed: muestra imagen y caption en la vista existente.

¿Qué flujo sigue la imagen en el storage hasta la tabla de posts?

El código prepara el archivo, lo sube y luego construye el post con todos los campos necesarios. La librería simplifica cada paso y centraliza errores.

• user ID: hardcodeado solo para la demostración.
• Nombre del archivo: extrae la extensión, compone nombre + stamp de tiempo.
• Ubicación: dentro del bucket “imágenes”, carpeta “post”, se concatena el path.
• Subida al storage: define file path y usa cache control de 3600 por defecto.
• URL pública: se obtiene desde el storage tras subir el archivo.
• Insert en tabla: “post_new” con user ID, image URL, caption y likes en 0.
• Selección: se pide devolver todos los campos para confirmar la creación.
• Validación visual: el objeto resultante incluye caption, fecha de creación, ID, URL de imagen, likes y user ID.

¿Cómo se muestra en el front end como feed?

• Imagen: se toma desde la URL pública.
• Caption: se usa el texto ingresado en el formulario.
• Estado inicial: likes en 0, listo para futuras interacciones.

¿Cómo resolver errores de row level security y validar la integración?

Al publicar desde el front end puede aparecer un error de row level security. Ocurre cuando el storage permite lecturas públicas pero las políticas no cubren inserciones o actualizaciones.

• Política temporal para la práctica: habilitar permisos de leer, insertar, actualizar y borrar para cualquier usuario.
• Ejecución: aplicar “permisos básicos” y guardar los cambios en SQL.
• Reintento: publicar de nuevo desde el front end; ahora devuelve “post creado exitosamente” con el objeto del post.
• Confirmación de arquitectura: storage + base de datos + front end quedan verificados y conectados.
• Próximos pasos posibles: subir múltiples imágenes, editar captions y crear vistas más complejas.

¿Qué habilidades y conceptos refuerzas aquí?

• Uso de HTTPie para requests POST con API key y authorization.
• Gestión de storage: subida de archivos, path, bucket y URL pública.
• Modelado de datos del post: caption, likes en 0, user ID, timestamps automáticos.
• Manejo de errores y políticas con row level security.
• Integración con Supabase JS en Next.js para orquestar storage y base de datos.

¿Te gustaría que profundicemos en políticas seguras de row level security o en cargas múltiples optimizadas? Cuéntalo en los comentarios y qué construirías a partir de aquí.