Cómo implementar la aplicación Next.js en cPanel (Guía)

Publicado: 2023-07-17
Tabla de contenido
  • ¿Qué es Next.js?
  • ¿Qué es cPanel?
  • Implementar la aplicación Next.js en cPanel
  • Pros y contras de implementar un NextJs en cPanel
  • preguntas frecuentes
  • Otros recursos
  • Conclusión

Aprender a implementar una aplicación Next.js en cPanel de una manera fluida y efectiva. Te guiaré paso a paso en este proceso.

Antes de profundizar, analicemos qué son Next.js y cPanel, en caso de que sea nuevo en estos términos.

¿Qué es Next.js?

Next.js es un marco ordenado, basado en React.js. Es un asistente cuando se trata de crear aplicaciones de representación del lado del servidor (SSR). React.js solo admite la creación de aplicaciones de una sola página (SPA) de forma predeterminada. Sin embargo, Next.js salta con su atractiva función SSR. ¿Qué otra cosa? Next.js tiene un gran impacto con un sistema de enrutamiento basado en archivos, entre otras ventajas.

¿Qué es cPanel?

Moviéndose a cPanel. Piense en ello como un software que simplifica la administración del servidor. Trae a su mesa una gran cantidad de herramientas. El Administrador de archivos, el Administrador de bases de datos y el Administrador de nombres de dominio son solo algunos ejemplos.

Ahora que nos hemos hecho amigos de Next.js y cPanel, prosigamos con nuestra misión principal: implementar una aplicación Next.js en cPanel. Suponiendo que tiene una aplicación Next.js, un servidor web con cPanel y un nombre de dominio vinculado, avancemos.

Implementar la aplicación Next.js en cPanel

Paso 1 : Comience configurando un servidor Next.js personalizado. Necesita un archivo server.js en el directorio raíz de su proyecto, completado con el código necesario. Busque una guía oficial de Next.js para obtener ayuda.

 const { createServer } = require('http') const { parse } = require('url') const next = require('next') const dev = process.env.NODE_ENV !== 'production' const hostname = 'localhost' const port = 3000 // when using middleware `hostname` and `port` must be provided below const app = next({ dev, hostname, port }) const handle = app.getRequestHandler() app.prepare().then(() => { createServer(async (req, res) => { try { // Be sure to pass `true` as the second argument to `url.parse`. // This tells it to parse the query portion of the URL. const parsedUrl = parse(req.url, true) const { pathname, query } = parsedUrl if (pathname === '/a') { await app.render(req, res, '/a', query) } else if (pathname === '/b') { await app.render(req, res, '/b', query) } else { await handle(req, res, parsedUrl) } } catch (err) { console.error('Error occurred handling', req.url, err) res.statusCode = 500 res.end('internal server error') } }) .once('error', (err) => { console.error(err) process.exit(1) }) .listen(port, () => { console.log(`> Ready on http://${hostname}:${port}`) }) })

Paso 2 : modifique el archivo package.json. Este paso hace que el entorno esté "listo para la producción" y activa el archivo server.js.

 { "scripts": { "start": "NODE_ENV=production node server.js" } }

Paso 3 : Es hora de construir su aplicación Next.js. Puede hacer esto con el comando npm run build o yarn run build en su Terminal.

Paso 4 : posterior a la compilación, busque los archivos de su proyecto Next.js en su administrador de archivos. Si no ve los archivos ocultos, active la visibilidad. Evite las carpetas node_modules y .git, los archivos README.md y .gitignore. Seleccione todos los demás archivos y carpetas y cree un archivo ZIP.

Paso 5 : Ahora, inicie sesión en su alojamiento web cPanel. Cargue y extraiga el archivo ZIP en la carpeta raíz de su nombre de dominio.

Paso 6 : Sus archivos de proyecto están listos. Dirígete a la sección Software en tu cPanel. Haga clic en Configurar la aplicación Node.js, seguido del botón + Crear aplicación. Configure su aplicación Node.js, teniendo en cuenta la versión de Node.js, el modo de aplicación de producción, la raíz de la aplicación, la URL y el archivo de inicio (server.js).

Termine haciendo clic en CREAR. Una vez creado, deténgalo por un tiempo. Desplácese hacia abajo hasta la sección Archivos de configuración detectados. Ejecute NPM Install para obtener todos los paquetes de Node.js. Finalmente, haga clic en INICIAR APLICACIÓN.

¡Ahí tienes! Abra su nombre de dominio en su navegador. Su aplicación Next.js ya está activa. ¡Buen trabajo en la implementación exitosa!

Compartir este método de implementación de aplicaciones Next.js en cPanel fue un placer. ¡La mejor de las suertes y feliz codificación!

Pros y contras de implementar un NextJs en cPanel

La implementación de una aplicación Next.js en cPanel viene con una variedad de beneficios. Aquí hay algunos pros y contras a considerar.

Ventajas :

  1. Fácil de usar : cPanel proporciona una interfaz gráfica fácil de usar, que simplifica el proceso de implementación.
  2. Automatización : cPanel incluye muchas herramientas automatizadas que pueden manejar tareas como la creación de bases de datos, la administración de archivos de sitios web, la configuración del correo electrónico y más.
  3. Versatilidad : cPanel es compatible con una amplia gama de aplicaciones, incluidas las aplicaciones de Node.js, como las creadas con Next.js.

Contras :

  1. Flexibilidad limitada : aunque cPanel es fácil de usar, a veces puede limitar la flexibilidad y el control sobre el entorno de su servidor debido a su interfaz simplificada.
  2. Posibles problemas de compatibilidad : algunos usuarios informaron problemas al implementar aplicaciones Next.js en plataformas de alojamiento compartido, como errores durante el proceso de compilación.

preguntas frecuentes

¿Cuáles son los beneficios y las limitaciones de alojar un sitio web Next.js en cPanel?

Alojar un sitio web de Next.js en cPanel puede tener varias ventajas, como el ahorro de costos y la retención de las capacidades de Next.js. Sin embargo, hay algunas limitaciones a tener en cuenta. Por ejemplo, cPanel no admite funciones sin servidor ni optimización estática automática. La decisión de alojar en cPanel debe basarse en las preferencias individuales y las necesidades comerciales.

¿Qué hace la configuración del archivo .htaccess al implementar una aplicación Next.js en cPanel?

La configuración del archivo .htaccess es una parte fundamental de la implementación de una aplicación Next.js en cPanel. Este archivo controla el comportamiento del servidor cuando se encuentra con ciertas condiciones. La configuración específica proporcionada en el ejemplo ayuda a manejar las solicitudes y redirecciones correctamente.

¿Qué sucede si encuentro bloqueos o problemas de redirección al implementar una aplicación Next.js en cPanel?

Si experimenta fallas o problemas de redirección al implementar su aplicación Next.js en cPanel, una solución podría ser crear un archivo de inicio llamado app.js en su carpeta raíz. Debe ejecutar su aplicación como una aplicación Node.js en este escenario.

¿Cómo puedo deshabilitar la optimización de imágenes al implementar una aplicación Next.js en cPanel?

Se puede deshabilitar la optimización de imágenes al implementar una aplicación Next.js en cPanel, pero las instrucciones exactas no se incluyeron en la información proporcionada. Para conocer los pasos específicos, debe consultar la documentación oficial de Next.js o los tutoriales relevantes.

Otros recursos

Los mejores proveedores de alojamiento de Next.JS

Los mejores proveedores de alojamiento de Node.js

Conclusión

Si bien la implementación de una aplicación Next.js en cPanel puede presentar algunos desafíos, los beneficios a menudo superan los inconvenientes. La simplicidad y la automatización que ofrece cPanel hacen que el proceso de implementación sea sencillo y manejable, incluso para los desarrolladores que son nuevos en el proceso. Con esta guía, ahora debería estar mejor equipado para implementar sus aplicaciones Next.js en cPanel.