NexIoT: cómo construí un sistema de automatización para el hogar con ESP8266, MQTT y Next.js

¿Qué es NexIoT?

NexIoT es un sistema full-stack de automatización del hogar compuesto por tres capas independientes que se comunican a través del protocolo MQTT:

1. Un microcontrolador ESP8266 que lee sensores y controla dispositivos físicos.
2. Un broker Eclipse Mosquitto que enruta los mensajes entre el hardware y el navegador.
3. Un dashboard web en Next.js que muestra el estado en tiempo real y permite enviar comandos de control.

Desde el dashboard puedes encender o apagar tres interruptores físicos y ver la temperatura ambiente actualizada en vivo mediante una gráfica.

La arquitectura del sistema

1. Firmware del ESP8266

El firmware está escrito en C++ con el framework de Arduino y compilado con PlatformIO. El dispositivo se conecta a la red WiFi local y al broker MQTT, luego publica periódicamente un payload JSON con el estado de tres interruptores y la temperatura del sensor:

{
  "switch1": false,
  "switch2": false,
  "switch3": true,
  "temperature": 24.3
}

También se suscribe al mismo topic para recibir comandos desde el dashboard. Para evitar que el dispositivo se congele ante caídas de red, implementé lógica de reconexión no bloqueante — algo que aprendí a valorar después de ver el microcontrolador colgarse en las primeras pruebas.

El código del firmware está dividido en módulos reutilizables: device_app y switch_controller, manteniendo main.cpp limpio y legible. También implementé debounce no bloqueante en los interruptores físicos para evitar lecturas falsas por rebote mecánico.

2. Eclipse Mosquitto como broker

Mosquitto actúa como el bus central de mensajes. Expone dos endpoints: uno TCP estándar para el firmware y uno WebSocket para el navegador. El repositorio incluye el archivo mosquitto.conf listo para correr localmente con un solo comando. Para desarrollo local se usa autenticación anónima; en producción se recomienda activar TLS y credenciales.

3. Dashboard en Next.js

El frontend está construido con Next.js 16, React 19, TypeScript y Tailwind CSS 4. Se conecta al broker via WebSocket usando el paquete mqtt y actualiza la UI en tiempo real con cada mensaje que llega. La lógica de MQTT está encapsulada en un custom hook (useMqtt) y un módulo de librería (lib/mqtt.ts), lo que mantiene los componentes limpios y desacoplados.

La gráfica de temperatura usa Recharts y muestra el historial de lecturas durante la sesión activa. Toda la configuración del broker (host, topics) está manejada por variables de entorno, así que cambiar entre entornos no requiere tocar el código.

¿Por qué estas tecnologías?

MQTT en lugar de HTTP polling

MQTT es un protocolo publish/subscribe diseñado específicamente para dispositivos IoT con recursos limitados. La alternativa habitual —hacer polling a una API REST cada cierto tiempo— introduce latencia innecesaria y consume más ancho de banda en el microcontrolador. Con MQTT, los mensajes llegan en cuanto el dispositivo los publica, sin esperar.

PlatformIO en lugar del IDE de Arduino

PlatformIO se integra con VS Code, gestiona dependencias con platformio.ini y permite una estructura de archivos modular. El IDE de Arduino fuerza a escribir todo en un único archivo .ino, lo cual hace el código más difícil de mantener a medida que crece.

Next.js para el dashboard

Aunque el dashboard es mayoritariamente client-side, Next.js ofrece una experiencia de desarrollo excelente con TypeScript integrado, fast refresh y un sistema de rutas que facilita escalar el proyecto. Además, es el stack con el que más trabajo día a día, así que pude moverme rápido.

Stack tecnológico

Lo que aprendí construyendo esto

CS50x me dio las bases para pensar en términos de protocolos, capas de abstracción y estructuras de datos — y NexIoT fue la oportunidad de aplicar todo eso en un sistema real con hardware físico. Depurar el firmware con el monitor serial mientras el dashboard mostraba los cambios en vivo fue uno de esos momentos donde todo "hace clic".

El mayor desafío fue sincronizar las tres capas durante el desarrollo: si el broker no estaba levantado, ni el firmware ni el web podían publicar. Aprender a leer los logs de Mosquitto para diagnosticar problemas de conexión fue tan valioso como escribir el código en sí.

Si te interesa ver el código completo o correrlo en tu propia máquina, todo está en el repositorio público de GitHub con instrucciones paso a paso.