commodoremalacca.club ya está en producción. Es la web del club retro Commodore Malacca y su código es open source. Está construida con una arquitectura que combina lo mejor de dos mundos: WordPress como backend headless y Next.js como frontend moderno. Y hoy quiero contarte por qué esta combinación es una gran idea — y animarte a hacer un fork.
La arquitectura: WordPress que no ves, Next.js que sí
La idea es sencilla pero potente: WordPress gestiona todo el contenido entre bastidores (posts, páginas, eventos, inscripciones), y Next.js se encarga de renderizar una experiencia de usuario moderna, rápida y con SSR/SSG. El visitante nunca interactúa directamente con WordPress — solo ve el frontend Next.js.
Nginx actúa como reverse proxy, enrutando las peticiones a
1 | /wp-admin |
1 | /wp-json |
2
3
4
5
│ │
Certbot (SSL) MariaDB
│
└─ /* → Next.js (SSR)
Todo corre sobre Docker Compose, con archivos separados para desarrollo y producción. Un solo comando levanta todo el stack.
¿Por qué usar WordPress como backend?
Puede sonar contraintuitivo usar WordPress «por detrás», pero tiene mucho sentido. Estas son las razones:
1. Un CMS maduro y probado
WordPress lleva más de 20 años en desarrollo. Su sistema de gestión de contenido es robusto, extensible y lo conoce todo el mundo. Cualquier miembro del club puede escribir un post o crear un evento sin necesidad de tocar código. No hay que reinventar la rueda del panel de administración.
2. API REST nativa
Desde la versión 4.7, WordPress incluye una API REST completa de serie. Posts, páginas, categorías, usuarios, media — todo está disponible como endpoints JSON sin instalar nada. Y si necesitas algo personalizado (como los eventos y las inscripciones de este proyecto), puedes extender la API con un plugin propio.
3. Ecosistema de plugins enorme
¿Necesitas SEO? Yoast. ¿Formularios avanzados? Gravity Forms. ¿Comercio electrónico? WooCommerce. Miles de plugins que puedes aprovechar como backend sin que afecten a tu frontend personalizado. Usas WordPress para lo que es bueno y Next.js para lo que WordPress no lo es.
4. Separación real de responsabilidades
Al desacoplar frontend y backend, cada equipo (o cada persona con doble rol) puede trabajar de forma independiente. El contenido se gestiona en WordPress; el diseño y la experiencia de usuario se desarrollan en React/Next.js. Si mañana quieres cambiar el frontend entero, el backend sigue intacto.
5. Rendimiento y seguridad
WordPress deja de ser un punto de ataque público: no sirve páginas directamente al usuario. Next.js sirve HTML pre-renderizado con SSR/SSG, lo que mejora drásticamente los tiempos de carga y el SEO. Y con la revalidación cada 60 segundos, el contenido siempre está fresco sin sacrificar rendimiento.
El stack completo
- Backend: WordPress 6.x con PHP 8.2 (FPM) + MariaDB 10.x
- Frontend: Next.js 14 + React + Material UI (MUI)
- 3D: Three.js — el hero de la landing carga un modelo wireframe de un Commodore 64 animado
- Carruseles: Swiper para sliders de noticias y eventos
- Proxy: Nginx con soporte SSL via Certbot
- Infraestructura: Docker Compose (desarrollo y producción)
Custom Post Types: más allá de los posts
El proyecto incluye un plugin WordPress propio (
1 | mcclub-core |
Todo esto se expone a través de endpoints REST propios que Next.js consume directamente.
Secciones de la web
- Home: Landing con hero 3D animado, carrusel de eventos y slider de noticias
- Noticias: Archivo de artículos con paginación y vista detalle por slug
- Calendario: Listado de eventos del club
- Quiénes somos: Información del club, servida desde una página WordPress
Haz tu propio fork
Este proyecto está pensado para ser reutilizado. Si tienes un club, una asociación, un colectivo retro o cualquier comunidad que necesite una web con gestión de contenido, eventos e inscripciones, este repositorio es un punto de partida excelente.
Lo que obtienes al hacer fork:
- Una arquitectura headless WordPress + Next.js lista para producción
- Docker Compose configurado para desarrollo y producción con SSL
- Un plugin WordPress con Custom Post Types y API REST extendida
- Un frontend moderno con SSR, Material UI y efectos Three.js
- Nginx configurado como reverse proxy con routing inteligente
- Documentación detallada del stack, componentes y despliegue
Solo necesitas cambiar el tema visual, ajustar los Custom Post Types a tu dominio y desplegar. La infraestructura ya está resuelta.
github.com/FreeMEM/commodore-malacca-club
Ver la web en producción: commodoremalacca.club
Si haces un fork o lo adaptas a tu proyecto, cuéntamelo. Y si quieres contribuir con mejoras, los pull requests están abiertos.