Crear y ejecutar un proyecto de Next.js

¿Qué es Next.js?

Next.js es un marco de trabajo React desarrollado por Vercel para construir aplicaciones React estáticas y renderizadas en el servidor. Ofrece muchas funcionalidades listas para usar, como renderización del lado del servidor (SSR), generación de sitios estáticos (SSG), enrutamiento de API, soporte integrado de CSS y Sass, etc., lo que permite a los desarrolladores construir aplicaciones web modernas de manera más eficiente.

Principales características y ventajas de Next.js

• Renderización del lado del servidor (SSR): mejora la velocidad de carga de la página y el rendimiento SEO.
• Generación de sitios estáticos (SSG): pre-renderiza las páginas estáticas, mejorando el rendimiento y la experiencia del usuario.
• División automática del código: solo carga el código JavaScript necesario para la página actual, optimizando el rendimiento.
• Enrutamiento integrado: enrutamiento basado en el sistema de archivos sin necesidad de configuraciones adicionales.
• Enrutamiento de API: permite crear puntos de API en el mismo proyecto.
• Soporte integrado de CSS y Sass: facilita la gestión de estilos.

Usar Next.js puede ayudar a los desarrolladores a construir aplicaciones web modernas y rápidas de una manera más eficiente.

Crear y ejecutar un proyecto de Next.js usando ServBay

En este artículo, utilizaremos el entorno Node.js proporcionado por ServBay para crear y ejecutar un proyecto de Next.js. Utilizaremos la funcionalidad 'Host' de ServBay para configurar el servidor web y acceder al proyecto mediante proxy inverso y servicio de archivos estáticos.

Crear un proyecto de Next.js

1. Inicializar el proyecto

   Primero, asegúrate de que ya has instalado el entorno Node.js proporcionado por ServBay. Luego, utiliza el siguiente comando para inicializar un nuevo proyecto de Next.js:

   cd /Applications/ServBay/www
   npx create-next-app@latest servbay-next-app

   Sigue las indicaciones para ingresar el nombre del proyecto (se recomienda nombrarlo servbay-next-app) y selecciona otras opciones según sea necesario.

2. Instalar dependencias

   Entra en el directorio del proyecto e instala las dependencias:

   cd servbay-next-app
   npm install

Modificar el contenido de salida del proyecto Next.js

1. Modificar el archivo pages/index.js

   Abre el archivo pages/index.js y modifica el contenido para que la página web muestre "Hello ServBay!":

   export default function Home() {
     return (
       <div>
         <h1>Hello ServBay!</h1>
       </div>
     );
   }

Entrar en modo de desarrollo

1. Ejecutar el servidor de desarrollo

   Inicia el servidor de desarrollo y especifica el puerto (por ejemplo: 8585):

   npm run dev -- -p 8585

   Esto iniciará un servidor de desarrollo local y expondrá el puerto 8585.

2. Configurar el proxy inverso de ServBay Host

   Utiliza la funcionalidad 'Host' de ServBay para acceder al servidor de desarrollo mediante proxy inverso. En la configuración de 'Host' de ServBay, añade un nuevo proxy inverso:

   • Nombre: My first Next.js dev site
   • Dominio: servbay-next-test.dev
   • Tipo de Host: Proxy inverso
   • IP: 127.0.0.1
   • Puerto: 8585

   Consulta los pasos detallados en añadir un sitio web de desarrollo Node.js.

3. Acceder al modo de desarrollo

   Abre el navegador y accede a https://servbay-next-test.dev para ver el proyecto en tiempo real. Dado que ServBay soporta dominios personalizados y certificados SSL gratuitos, disfrutarás de una mayor seguridad.

Construir la versión de producción

1. Construir la versión de producción

   Una vez completado el desarrollo, utiliza los siguientes comandos para construir la versión de producción:

   npm run build
   npm run export

   Una vez completada la construcción, los archivos estáticos generados estarán en el directorio out.

2. Configurar el servicio de archivos estáticos

   Utiliza la funcionalidad 'Host' de ServBay para acceder a la versión de producción mediante el servicio de archivos estáticos. En la configuración de 'Host' de ServBay, añade un nuevo sitio web estático:

   • Nombre: My first Next.js production site
   • Dominio: servbay-next-test.prod
   • Tipo de Host: Estático
   • Directorio raíz del sitio web: /Applications/ServBay/www/servbay-next-app/out

3. Acceder al modo de producción

   Abre el navegador y accede a https://servbay-next-test.prod para ver la versión de producción construida. Con los dominios personalizados y certificados SSL gratuitos de ServBay, tu sitio web tendrá mayor seguridad y credibilidad.

Con estos pasos, has creado y ejecutado exitosamente un proyecto de Next.js utilizando las funcionalidades proporcionadas por ServBay para gestionar y acceder a tu proyecto.