¿Cómo ejecutar Next.js en producción?

El despliegue de una aplicación Next.js en producción puede ser sencillo pero técnico, ofreciendo una variedad de estrategias de implementación. Ya sea que elijas una solución gestionada o prefieras el autoalojamiento con Node.js, Docker o exportaciones estáticas, Next.js te proporciona la flexibilidad y el rendimiento necesarios para las aplicaciones web modernas. Esta guía ofrece un enfoque paso a paso para implementar Next.js en producción, incluyendo estrategias avanzadas de almacenamiento en caché y middleware.

Desafíos en los despliegues de producción

Implementar aplicaciones web en producción introduce diversos retos:

• Optimización del rendimiento para usuarios finales en diferentes ubicaciones geográficas.

• Escalabilidad para manejar un tráfico creciente.

• Actualizaciones sin interrupciones ni inconsistencias en los datos.

Los frameworks tradicionales pueden no admitir de manera nativa características como el server-side rendering (SSR) o el incremental static regeneration (ISR), lo que a menudo requiere configuraciones complejas. Next.js simplifica este proceso ofreciendo opciones gestionadas y autoalojadas adaptadas a tus necesidades.

Opciones de implementación en Next.js

Compilaciones de producción con next build

Antes de la implementación, ejecuta next build para generar una compilación optimizada para producción. Este proceso:

• Compila JavaScript y lo minifica utilizando el Compilador de Next.js.

• Genera HTML y CSS estáticos para cada página.

• Garantiza la compatibilidad con los navegadores modernos.

La compilación resultante es consistente y admite todas las funciones de Next.js.

Métodos de implementación

Servidor Node.js

Para implementar con Node.js:

1.Asegúrate de que tu archivo package.json incluya:

{  
  "scripts": {  
    "build": "next build",  
    "start": "next start"  
  }  
}

2. Compila tu aplicación:

npm run build 

3. Inicia el servidor:

npm run start

Este método admite todas las funciones de Next.js, incluidas SSR, ISR y enrutamiento dinámico.

Despliegue con Docker

El despliegue a través de Docker permite entornos contenedorizados, ideales para aplicaciones escalables:

1. Construye la imagen de Docker:

docker build -t nextjs-app .  

2. Ejecuta el contenedor:

docker run -p 3000:3000 nextjs-app  

Docker garantiza la consistencia en los entornos de desarrollo, pruebas y producción.

Exportación estática

Para sitios puramente estáticos o aplicaciones de una sola página (SPA), Next.js admite exportaciones estáticas:

1. Agrega un script de exportación en package.json:

{  
  "scripts": {  
    "export": "next build && next export"  
  }  
}  

2. Ejecuta el script:

npm run export  

Este método es compatible con soluciones de alojamiento como AWS S3, Nginx o GitHub Pages, aunque no admite funciones que dependen de un servidor, como SSR.

Beneficios de Next.js y características avanzadas en producción

Almacenamiento en caché y el incremental static regeneration (ISR)

Next.js utiliza el almacenamiento en caché para optimizar el rendimiento:

• Los activos inmutables se almacenan indefinidamente, mejorando los tiempos de carga.

• ISR permite actualizar páginas estáticas sin una reconstrucción completa. Los encabezados Cache-Control aseguran la revalidación según la configuración de getStaticProps.

Ejemplo:

export async function getStaticProps() {  
  return {  
    props: {},  
    revalidate: 60, // Revalidate every 60 seconds  
  }  
}  

Middleware

En Next.js, el middleware permite un manejo flexible de solicitudes, incluyendo tareas como redirecciones, autenticación y encabezados personalizados. Funciona con una latencia mínima y es compatible con configuraciones autoalojadas.

Ejemplo (middleware.js):

import { NextResponse } from "next/server";
export function middleware(req) {
  const url = req.nextUrl.clone();
  // Redirect to the login page if the user is not authenticated
  if (!req.cookies.get("auth")) {
    url.pathname = "/login";
    return NextResponse.redirect(url);
  }
  // Proceed with the request if the user is authenticated
  return NextResponse.next();
}

Prefetching

Next.js realiza automáticamente la precarga de datos y recursos para los enlaces visibles en el área de visualización, lo que permite una navegación más rápida en entornos de producción. El uso del componente asegura que las páginas enlazadas se precarguen en segundo plano, mejorando la velocidad de navegación. Ejemplo de precarga con :

Ejemplo de Prefetching con Link:

import Link from "next/link";
export default function Home() {
  return (
    <div>
      <Link href="/about">Go to About Page</Link>
    </div>
  );
}

Optimización de imágenes

Next.js incluye optimización de imágenes integrada para servir formatos modernos como WebP, ajustarlas a tamaños específicos del dispositivo y mejorar el rendimiento. El componente Image maneja automáticamente la carga diferida, el redimensionamiento y la selección de formato.

Ejemplo usando Image:

import Image from "next/image";
export default function Profile() {
  return (
    <Image
      src="/profile.jpg"
      alt="Profile Picture"
      width={150}
      height={150}
      placeholder="blur"
      blurDataURL="/path-to-low-resolution-image/placeholder.jpg"
    />
  );
}

Nota: Configura el uso de imágenes externas en next.config.js para garantizar seguridad:

module.exports = {
  images: {
    /* The following configuration ensures the src property of an <Image> must start with https://example.com/account123/ */
    remotePatterns: [
      {
        protocol: "https",
        hostname: "example.com",
        port: "",
        pathname: "/account123/**",
        search: "",
      },
    ],
  },
};

Conclusión

El despliegue de Next.js en producción ofrece la flexibilidad de elegir entre soluciones gestionadas y autoalojadas, asegurando escalabilidad, rendimiento y soporte robusto para todas las características. Al aprovechar estrategias avanzadas como el almacenamiento en caché, middleware y optimización de imágenes, puedes optimizar tus aplicaciones para alta disponibilidad y satisfacción de las personas usuarias.

Para más detalles, visita: Construyendo tu aplicación: Despliegue

En Bitlogic nos especializamos en entregar soluciones web personalizadas utilizando un stack tecnológico moderno como Next.js. Si te interesó Next.js para tu proyecto, y necesitas desarrollar una aplicación web para tu empresa o institución, contactanos haciendo clic acá. El café corre por nuestra cuenta ;).