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
oapp
, 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:
- Tener ServBay instalado correctamente en tu sistema macOS.
- 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.
Abre la terminal y navega al directorio raíz de sitios web de ServBay:
bashcd /Applications/ServBay/www
1Inicializa el proyecto con
create-next-app
: Ejecuta el siguiente comando para crear un nuevo proyecto Next.js. Recomendamos el nombre del proyectoservbay-next-app
, que generará una carpeta con ese nombre bajo/Applications/ServBay/www
.bashnpx create-next-app@latest servbay-next-app
1npx
es una herramienta para ejecutar paquetes de Node.js, ycreate-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.).Entra en el directorio del proyecto e instala las dependencias:
bashcd servbay-next-app npm install
1
2El comando
npm install
instalará todos los paquetes definidos en el archivopackage.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.
Abre el archivo
pages/index.js
(si seleccionaste Pages Router). Si usas App Router, modificaapp/page.js
. Aquí tomamos Pages Router como ejemplo:bash# Abre el archivo con tu editor favorito, por ejemplo, VS Code code pages/index.js
1
2Modifica el archivo para que la web muestre "Hello ServBay!". Reemplaza el contenido o actualízalo siguiendo esta estructura:
javascript// 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> ); }
1
2
3
4
5
6
7
8
9Si 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.
Ejecuta el servidor de desarrollo de Next.js: Desde la raíz del proyecto (
/Applications/ServBay/www/servbay-next-app
), ejecuta:bashnpm run dev -- -p 8585
1Este comando inicia el servidor de desarrollo de Next.js en el puerto local 8585. Puedes utilizar cualquier puerto disponible.
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
hacia127.0.0.1:8585
.Puedes consultar los pasos detallados en Agregar un sitio de desarrollo Node.js en ServBay.
- Nombre (Name):
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.
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:bashnpm run build npm run export
1
2npm run build
compila el código del proyecto, generando el build optimizado en el directorio.next
.npm run export
(o si tienes configuradooutput: '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 directorioout
.
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
.- Nombre (Name):
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.