Introducción
El despliegue de frameworks modernos como Next.js suele asociarse exclusivamente a plataformas en la nube complejas. Sin embargo, cPanel ha evolucionado para ofrecer un soporte robusto para aplicaciones Node.js.
En ClickPanda, te mostramos cómo unir la potencia de React con la facilidad de administración de nuestra infraestructura, logrando un rendimiento superior sin complicaciones innecesarias.
Tabla de contenido
Preparación de la aplicación (Local)
Antes de subir tu proyecto, debes preparar el build para producción. En tu terminal local, ejecuta:
Bash
npm run build
Asegúrate de que tu archivo package.json tenga los scripts correctos y que uses un servidor personalizado o el comando de inicio de Next.js.
💡Importante: Para cPanel, lo más estable es usar un archivo de entrada llamado app.js o index.js.
Configuración en cPanel: "Setup Node.js App"
La clave está en el módulo de cPanel. Sigue estos pasos:
- Busca la sección Software y haz clic en Setup Node.js App.
- Clic en Create Application.
- Node.js version: Selecciona la versión recomendada (ej. 18.x o 20.x).
- Application mode: Cámbialo a Production.
- Application root: La carpeta donde subirás los archivos (ej. my-next-app).
- Application URL: Selecciona tu dominio o subdominio.
Application startup file: Escribe app.js.
💡Tip: Si prefieres usar un subdominio (ej: lab.tudominio.com), asegúrate de crearlo primero en la sección «Subdominios» de tu cPanel.
Uso de la Terminal de cPanel y Comandos
Una vez creada la aplicación, cPanel te dará un comando para entrar al entorno virtual (VirtualEnv).
- Ve a la sección Advanced > Terminal en cPanel.
- Copia y pega el comando que te dio el paso anterior (se ve algo como source /home/usuario/nodevenv/…/bin/activate).
- Ahora, navega a tu carpeta y instala las dependencias:
Bash
cd my-next-app
npm install
El archivo de entrada (Entry Point): app.js
Como cPanel usa Phusion Passenger para servir la app, necesitas un archivo app.js en la raíz de tu proyecto que «levante» Next.js:
JavaScript
const { createServer } = require('http')
const { parse } = require('url')
const next = require('next')
const dev = false
const app = next({ dev })
const handle = app.getRequestHandler()
app.prepare().then(() => {
createServer((req, res) => {
const parsedUrl = parse(req.url, true)
handle(req, res, parsedUrl)
}).listen(process.env.PORT || 3000, (err) => {
if (err) throw err
console.log('> Ready on http://localhost:' + (process.env.PORT || 3000))
})
})
Gestión de Variables de Entorno y Despliegue
No subas tu archivo .env al repositorio o por FTP si contiene claves sensibles.
- Dentro de Setup Node.js App, ve a la sección Environment variables.
- Agrega tus claves de API, secretos de base de datos y el NODE_ENV=production.
- Clic en Save y luego en Restart. Tu aplicación Next.js ya estará corriendo con renderizado del lado del servidor (SSR) optimizado.
Beneficios de elegir ClickPanda para Next.js
✅ Optimización de recursos: cPanel gestiona la memoria para mantener tiempos de respuesta mínimos.
✅ Seguridad: SSL gratuito incluido y gestión visual de firewalls.
✅ Todo en uno: Correos corporativos, bases de datos y tu frontend moderno en un solo lugar.
Conclusión
No tienes que sacrificar la facilidad de uso por la modernidad. Implementar Next.js en ClickPanda te da lo mejor de ambos mundos: un framework de alto nivel en una plataforma que ya conoces y en la que confías.
