Cómo construí la Terminal Espacial: Next.js + Canvas API

El desarrollo web tradicional a veces puede sentirse... estático. Cuando me propuse rediseñar mi rincón en internet, tenía una regla de oro: debía sentirse como un videojuego, pero funcionar como una web moderna.

En este artículo te cuento paso a paso cómo logré unir el mundo del DOM con el renderizado de alto rendimiento de HTML5 Canvas.

El Stack Tecnológico

Para este proyecto, decidí mantener las dependencias al mínimo y aprovechar las herramientas nativas. Mi stack principal fue:

• Next.js 15: Para el enrutamiento, SSR y el motor del blog.

• React: Gestión de estado y ciclo de vida de la UI.

• HTML5 Canvas: Todo el sistema de partículas, estrellas y colisiones.

• CSS Modules: Estilado encapsulado (nada de Tailwind esta vez, quería control total píxel por píxel).

Dando vida al espacio (Canvas)

El mayor desafío no fue dibujar las estrellas, sino asegurar que el juego corriera a 60 FPS constantes sin bloquear los hilos de React.

El bucle de renderizado

Para lograrlo, utilicé requestAnimationFrame encapsulado dentro de un useEffect. Aquí un fragmento simplificado de cómo se inicializa el motor:

useEffect(() => {
constcanvas=canvasRef.current;
if (!canvas)return;
constctx=canvas.getContext("2d");

letanimationId:number;

functionanimate() {
animationId=requestAnimationFrame(animate);

// 1. Limpiamos el frame anterior
ctx.clearRect(0,0,canvas.width,canvas.height);

// 2. Calculamos físicas y colisiones
updatePhysics();

// 3. Dibujamos la nueva escena
drawBackground(ctx);
drawShip(ctx);
  }

animate();// ¡Arrancamos el motor!

return () =>cancelAnimationFrame(animationId);
}, []);