Crear y ejecutar un proyecto Next.js en ServBay

Visión general

Next.js es un potente framework de React desarrollado y mantenido por Vercel, ampliamente utilizado para la creación de aplicaciones web modernas y de alto rendimiento. Sobre la base de React, ofrece numerosas funcionalidades listas para usar, lo que simplifica considerablemente el proceso de construcción de aplicaciones complejas para los desarrolladores.

¿Qué es Next.js?

Next.js es un popular framework open source de React que admite múltiples métodos de renderizado, como el renderizado del lado del servidor (SSR) y la generación de sitios estáticos (SSG). Estas características ayudan a mejorar el rendimiento de la aplicación, la experiencia del usuario y la visibilidad en motores de búsqueda. Next.js incorpora en su núcleo funciones como enrutamiento basado en el sistema de archivos, rutas de API, división automática de código y soporte para CSS Modules, proporcionando una experiencia de desarrollo integral.

Principales características y ventajas de Next.js

• Soporte para múltiples estrategias de renderizado: Compatible con SSR (renderizado del lado del servidor), SSG (generación de sitios estáticos), CSR (renderizado en el cliente) y enfoques híbridos. Los desarrolladores pueden elegir el modo de renderizado más adecuado según la necesidad.
• Enrutamiento basado en sistema de archivos: Genera rutas automáticamente a partir de la estructura de los directorios pages o app, de forma simple e intuitiva.
• Rutas de API: Permite crear endpoints API dentro del propio proyecto Next.js de manera sencilla, facilitando el desarrollo fullstack.
• División automática de código: El código se divide a nivel de página, cargando sólo los scripts necesarios para la página actual y optimizando el tiempo de carga.
• Componente de imágenes optimizado (next/image): Ajusta automáticamente el tamaño, formato y estrategia de carga de las imágenes para mejorar el rendimiento.
• Soporte integrado para CSS y Sass: Facilita la gestión y escritura de estilos.
• Recarga rápida (Fast Refresh): Ofrece actualizaciones de código casi instantáneas durante el desarrollo.

Con Next.js, los desarrolladores pueden crear aplicaciones web modernas de forma más eficiente, escalable y fácil de mantener.

Ejecutar proyectos Next.js en ServBay

ServBay proporciona un entorno local de desarrollo web integrado que incluye Node.js y muchas otras herramientas y lenguajes. Aprovechando el entorno de Node.js y la función de gestión de sitios web de ServBay (incluyendo proxy inverso y servicio de archivos estáticos), crear, desarrollar y desplegar proyectos Next.js se vuelve sumamente sencillo.

En este artículo te mostraremos cómo crear un proyecto Next.js, ejecutarlo en modo desarrollo (usando proxy inverso) y desplegarlo en producción (mediante la funcionalidad de sitio estático) dentro de ServBay.

Prerrequisitos

Antes de comenzar, asegúrate de cumplir con los siguientes requisitos:

1. Tener ServBay instalado correctamente en tu sistema macOS.
2. Haber instalado y habilitado el paquete de Node.js a través de la interfaz de gestión de paquetes de ServBay. Si aún no tienes Node.js, consulta la guía Usar el entorno Node.js de ServBay.

Pasos a seguir

1. Crear un proyecto Next.js

Primero, necesitamos inicializar un nuevo proyecto Next.js.

1. Abre la terminal y navega al directorio raíz de sitios web de ServBay:

   cd /Applications/ServBay/www

2. Inicializa el proyecto con create-next-app: Ejecuta el siguiente comando para crear un nuevo proyecto Next.js. Recomendamos el nombre del proyecto servbay-next-app, que generará una carpeta con ese nombre bajo /Applications/ServBay/www.

   npx create-next-app@latest servbay-next-app

   npx es una herramienta para ejecutar paquetes de Node.js, y create-next-app@latest usará la última versión del asistente de Next.js. Sigue las instrucciones en pantalla para configurar el proyecto (elige si deseas usar TypeScript, ESLint, Tailwind CSS, App Router, etc.).

3. Entra en el directorio del proyecto e instala las dependencias:

   cd servbay-next-app
   npm install

   El comando npm install instalará todos los paquetes definidos en el archivo package.json del proyecto.

2. Modificar el contenido de la página de inicio (opcional)

Para verificar que el proyecto funcione correctamente, puedes modificar brevemente el contenido de la página principal.

1. Abre el archivo pages/index.js (si seleccionaste Pages Router). Si usas App Router, modifica app/page.js. Aquí tomamos Pages Router como ejemplo:

   # Abre el archivo con tu editor favorito, por ejemplo, VS Code
   code pages/index.js

2. Modifica el archivo para que la web muestre "Hello ServBay!". Reemplaza el contenido o actualízalo siguiendo esta estructura:

   // pages/index.js (Pages Router)
   export default function Home() {
     return (
       <div>
         <h1>Hello ServBay!</h1>
         <p>Esta página se está ejecutando a través de ServBay.</p>
       </div>
     );
   }

   Si usas App Router (app/page.js), la estructura puede variar ligeramente, pero el cambio principal es en el contenido de la etiqueta <h1>.

3. Ingresar en modo desarrollo

Durante el desarrollo, normalmente empleamos el servidor de desarrollo integrado de Next.js, que admite Hot Module Replacement (HMR) y recarga rápida para ver los cambios al instante. El proxy inverso de ServBay es ideal para asociar un dominio local con este servidor en ejecución.

1. Ejecuta el servidor de desarrollo de Next.js: Desde la raíz del proyecto (/Applications/ServBay/www/servbay-next-app), ejecuta:

   npm run dev -- -p 8585

   Este comando inicia el servidor de desarrollo de Next.js en el puerto local 8585. Puedes utilizar cualquier puerto disponible.

2. Configura el sitio web en ServBay (proxy inverso): Abre la app de ServBay y accede a la gestión de sitios. Haz clic en “Agregar sitio nuevo” y configura los siguientes datos:

   • Nombre (Name): My first Next.js dev site (o cualquier nombre que prefieras)
   • Dominio (Domain): servbay-next-dev.servbay.demo (recomendamos el sufijo .servbay.demo para dominios locales)
   • Tipo de sitio web (Website Type): selecciona Proxy inverso (Reverse Proxy)
   • IP de destino (Proxy IP): 127.0.0.1 (dirección de loopback local)
   • Puerto de destino (Proxy Port): 8585 (el puerto del servidor de desarrollo Next.js)

   Al guardar la configuración, ServBay actualizará automáticamente Caddy o Nginx (según tu entorno) para dirigir las peticiones a servbay-next-dev.servbay.demo hacia 127.0.0.1:8585.

   Puedes consultar los pasos detallados en Agregar un sitio de desarrollo Node.js en ServBay.

3. Accede al sitio en modo desarrollo: Abre el navegador y visita tu dominio configurado: https://servbay-next-dev.servbay.demo.

   ServBay configurará automáticamente un certificado SSL (usando el CA de usuario de ServBay) para todos los dominios registrados localmente. De este modo, podrás acceder de forma segura mediante HTTPS y sin mensajes de advertencia del navegador. ServBay admite dominios personalizados y certificados SSL gratuitos, lo que es muy útil para el desarrollo local.

4. Construir la versión de producción y desplegar como sitio estático

Cuando tu proyecto Next.js esté listo para producción, normalmente deberás construir una versión optimizada. Para proyectos Next.js que generan salida estática (output: 'export' o usando next export), el servicio de sitios estáticos de ServBay es la opción ideal.

1. Construye la versión de producción y exporta archivos estáticos: Desde la raíz del proyecto (/Applications/ServBay/www/servbay-next-app), ejecuta:

   npm run build
   npm run export

   • npm run build compila el código del proyecto, generando el build optimizado en el directorio .next.
   • npm run export (o si tienes configurado output: 'export'; depende de la configuración o la versión de Next.js) exporta el sitio como archivos HTML, CSS y JavaScript estáticos, guardándolos en el directorio out.

2. Configura el sitio en ServBay (servicio de archivos estáticos): Abre la app de ServBay y entra en la gestión de sitios. Haz clic en “Agregar sitio nuevo” y completa:

   • Nombre (Name): My first Next.js production site (o el nombre que prefieras)
   • Dominio (Domain): servbay-next-prod.servbay.demo (recomendado el sufijo .servbay.demo)
   • Tipo de sitio web (Website Type): selecciona Estático (Static)
   • Directorio raíz del sitio (Website Root): la ruta absoluta al directorio out exportado de Next.js, es decir, /Applications/ServBay/www/servbay-next-app/out.

   Guarda los cambios y ServBay habilitará la entrega directa de archivos desde /Applications/ServBay/www/servbay-next-app/out.

3. Accede al sitio en modo producción: Abre el navegador y entra en https://servbay-next-prod.servbay.demo. Ahora verás el contenido estático generado por Next.js para tu sitio en producción.

   Igualmente, gracias a la configuración automática de dominios y SSL, tu entorno de producción local estará accesible mediante HTTPS.

Resumen

Tras realizar estos pasos, habrás creado con éxito un proyecto Next.js en tu entorno de desarrollo local con ServBay, aprendido a previsualizarlo en tiempo real usando proxy inverso en modo desarrollo y también a desplegar la versión de producción como un sitio estático utilizando el servidor de archivos de ServBay. El entorno integrado de ServBay y sus funciones de gestión de sitios simplifican enormemente el flujo de desarrollo y pruebas locales para proyectos Next.js.