Cómo implantar una aplicación Next.js

Desplegar una aplicación Next.js implica hacer que su aplicación web Next.js sea accesible en Internet para que los usuarios de todo el mundo puedan interactuar con ella.

Aunque existen varias opciones de despliegue, la plataforma Container as a Service (CaaS) de Back4app ofrece varias ventajas. Estas ventajas la convierten en una opción convincente para cualquier desarrollador que busque desplegar su aplicación web con sencillos pasos.

En este artículo, construirás una aplicación Next.js y aprenderás cómo puedes alojar y desplegar esa aplicación utilizando el servicio de contenedorización de Back4app.

Principales conclusiones

• Aprenderá a utilizar el modelo de nube Container as a Service para desplegar su aplicación web Next.js de forma rápida y eficaz.

• Descubrirá los puntos fuertes de Next.js, como el renderizado del lado del servidor, la división automática del código, el enrutamiento incorporado y la generación de sitios estáticos que mejoran la experiencia del usuario.

• Comprenderá las posibles limitaciones de Next.js, como su curva de aprendizaje, su ecosistema limitado, la complejidad de Server-Side Rendering y la flexibilidad limitada de enrutamiento.

¿Qué es Next.js?

Next.js es un framework de código abierto extendido sobre la librería React para generar aplicaciones web. Con Next.js, puede crear cómodamente aplicaciones React renderizadas del lado del servidor (SSR) y generadas estáticamente que se adapten a sus necesidades.

Fue creado por Vercel (antes conocido como Zeit) en el año 2016. En los últimos años Next.js ha ganado mucha popularidad debido a su facilidad de uso y sus potentes funciones.

Ventajas de Next.js

Next.js ofrece varias ventajas que lo convierten en una opción popular para el desarrollo web. Algunas de estas ventajas incluyen:

Renderizado del lado del servidor

El framework Next.js permite Server-Side Rendering para sus aplicaciones web. Server-Side Rendering permite que las páginas sean pre-renderizadas en el servidor antes de ser enviadas al cliente como HTML. Proporciona una mejor optimización para los motores de búsqueda (SEO).

Cuando se utiliza el renderizado del lado del servidor, las páginas se renderizan en el servidor antes de enviarse al cliente, lo que aumenta el tiempo de carga de las páginas. Esto es especialmente beneficioso para los usuarios con conexiones o dispositivos más lentos.

Además, el renderizado del lado del servidor facilita la obtención de datos de API o bases de datos antes de renderizar la página.

División automática del código

La división de código se refiere a la técnica de dividir una aplicación JavaScript y todo su código de construcción en trozos más pequeños. Next.js divide automáticamente el código en función de las rutas de la página.

La función de división automática del código de Next.js acelera la carga inicial de las páginas. También reduce la cantidad de JavaScript que se envía al cliente, lo que mejora el rendimiento y la experiencia del usuario.

Enrutamiento integrado

El sistema de enrutamiento integrado de Next.js es una ventaja significativa del framework. Con el sistema de enrutamiento incorporado, definir rutas y navegar entre páginas es fácil. Next.js admite el enrutamiento tanto del lado del cliente como del lado del servidor.

Este sistema de enrutamiento es compatible con el enrutamiento dinámico, lo que aumenta la productividad de los desarrolladores, mejora el rendimiento de las aplicaciones y ofrece una experiencia de usuario fluida y eficaz.

Rutas API

Las aplicaciones Next.js vienen con rutas API predeterminadas que permiten a los desarrolladores crear puntos finales de API sin servidor directamente dentro de sus aplicaciones. Las rutas API son una potente función de Next.js que ofrece varias ventajas para la creación de aplicaciones web.

Estas ventajas incluyen permitir a los desarrolladores crear funciones sin servidor, definir y organizar puntos finales de API y obtener datos durante la renderización del lado del servidor. Las rutas eliminan la necesidad de un servidor backend independiente. También son compatibles con las API REST y GraphQL.

Next.js utiliza rutas de API para gestionar eficazmente las solicitudes de API, lo que facilita la creación de aplicaciones escalables, eficaces y compatibles con SEO.

Generación de sitios estáticos

La generación de sitios estáticos es una ventaja clave del framework Next.js. Next.js utiliza la generación de sitios estáticos para pre-renderizar las páginas en tiempo de compilación y servirlas como archivos estáticos. Esta función garantiza tiempos de carga rápidos al pre-renderizar cada página en archivos HTML.

Los sitios estáticos son altamente SEO-friendly y han reducido los vectores de ataque, haciéndolos más seguros. Los sitios estáticos generados por Next.js son intrínsecamente escalables, ya que pueden soportar grandes cargas de tráfico sin forzar la infraestructura del servidor.

Next.js habilita la compatibilidad offline para sitios estáticos, de modo que los usuarios pueden seguir navegando y accediendo a páginas visitadas anteriormente sin conexión a Internet.

Limitaciones de Next.js

Aunque Next.js es un marco potente y popular para crear aplicaciones React renderizadas en el lado del servidor, aquí tienes algunas limitaciones que debes conocer:

Curva de aprendizaje

Next.js introduce conceptos y convenciones adicionales que no son familiares para el desarrollo tradicional de React. Pasar a construir con Next.js puede requerir tiempo para entender y adaptarse a su arquitectura y características específicas.

Next.js ofrece una serie de opciones de configuración que pueden personalizarse en función de los requisitos del proyecto. Con sus herramientas, bibliotecas y opciones de plugin, debes tomarte un tiempo para familiarizarte con el ecosistema de Next.js.

Ecosistema limitado

Next.js es un framework relativamente nuevo comparado con frameworks/bibliotecas establecidas como React y Angular. Como resultado, su ecosistema todavía está creciendo y en sus etapas iniciales. No tiene la misma amplitud de bibliotecas y plugins que otros frameworks más consolidados.

Es posible que tenga que recurrir a paquetes comunitarios o crear soluciones a medida para requisitos específicos.

Complejidad de la renderización en el servidor

Aunque el renderizado del lado del servidor es una potente característica de Next.js, también puede introducir complejidad en el proceso de desarrollo.

La mayoría de las veces requiere bastante más tiempo de aprendizaje e implementación. El uso de Server-Side Rendering puede provocar errores de renderizado en el servidor o incoherencias entre el renderizado del servidor y el del cliente.

Es mejor ser cuidadoso al implementar este renderizado. Debes ser capaz de gestionar la obtención de datos y el estado de la aplicación de forma eficaz, ya que el servidor y el cliente necesitan sincronizar sus estados.

Flexibilidad de enrutamiento limitada

Next.js tiene un sistema de enrutamiento incorporado que sigue un enfoque de enrutamiento basado en archivos. Esto pretende simplificar el enrutamiento en muchos casos. Sin embargo, puede que no proporcione el mismo nivel de flexibilidad que otras bibliotecas de enrutamiento más avanzadas.

Personalizar el comportamiento de enrutamiento más allá de las convenciones predeterminadas puede requerir soluciones adicionales, que no siempre son convenientes.

Opciones de implantación de Next.js

Existen varias opciones de despliegue para las aplicaciones Next.js, incluidos los contenedores como servicio (CaaS) y la infraestructura como servicio (IaaS).

Deberías saber cuáles son estas opciones, cómo funcionan y cómo se comparan entre sí para adaptarse mejor a tu aplicación Next.js creada.

Infraestructura como servicio (IaaS)

IaaS es un modelo de computación en nube que proporciona recursos informáticos virtualizados a través de Internet. Al utilizar IaaS, los desarrolladores pueden desplegar y gestionar sus aplicaciones en máquinas virtuales (VM) alojadas en un proveedor de nube.

Desplegar una aplicación Next.js en una plataforma IaaS ofrece varias ventajas, como el control y la flexibilidad. Las plataformas IaaS también son rentables, ya que siguen un programa de pago por uso. Esto significa que se le cobra en función de los recursos que su aplicación acabe utilizando.

Algunas plataformas IaaS populares que podría utilizar para desplegar sus aplicaciones Next.js incluyen:

• Amazon Web Services (AWS) EC2
• Google Cloud Platform (GCP) Compute Engine
• Microsoft Azure Virtual Machines
• DigitalOcean

Contenedor como servicio (CaaS)

CaaS es un modelo de computación en nube similar a una plataforma IaaS. Sin embargo, además de proporcionar recursos informáticos, proporcionan un entorno totalmente gestionado para desplegar y gestionar aplicaciones en contenedores.

Esto significa que hay poca configuración y trabajo para manejar el funcionamiento de la aplicación. Esto también significa que hay muy poco control sobre las personalizaciones.

Al desplegar una aplicación Next.js como contenedor, el código de la aplicación, el tiempo de ejecución y las dependencias se agrupan en una imagen de contenedor. Esta imagen puede desplegarse y ejecutarse en una plataforma CaaS.

Algunas plataformas CaaS populares en las que puede desplegar sus aplicaciones Next.js incluyen:

• Back4App
• AWS Elastic Container Service (ECS)
• Google Kubernetes Engine (GKE)
• Azure Container Service (AKS)

Las plataformas CaaS simplifican la implantación. También mejoran la escalabilidad, portabilidad y seguridad de sus aplicaciones. Abstraen la gestión de la infraestructura y proporcionan orquestación y escalado integrados.

Creación e implementación de una aplicación Next.js en Back4App

En esta sección, vamos a discutir lo que se necesita para construir una aplicación web utilizando el framework Next.js y desplegar la aplicación en la plataforma Back4app utilizando el servicio de contenedor Back4app.

Aprenderás todo lo necesario para navegar por la plataforma y utilizar el servicio de contenedores para que tu aplicación web sea accesible a través de los servidores de Back4app. Después de leer esta sección aprenderás a desplegar una app Next.js.

¿Qué es Back4app Containers?

La plataforma Back4app CaaS es una plataforma que le proporciona un modelo de servicio basado en la nube, permitiéndole gestionar y desplegar contenedores y aplicaciones en dichos contenedores.

Back4App Containers es una potente característica de la plataforma Back4App que le proporciona un entorno flexible, escalable y seguro para ejecutar sus aplicaciones.

Estos contenedores soportan múltiples lenguajes de programación como PHP, Python, Node.js, etc. Algunos desarrolladores algunos es una gran plataforma de alojamiento gratuito Next.js.

Los contenedores de Back4app pueden escalarse automáticamente para satisfacer sus demandas. Cada contenedor está aislado de los demás, lo que garantiza la protección de los datos de su aplicación. Los contenedores se integran fácilmente con el ecosistema de Back4App.

Esto facilita la conexión de los contenedores a otros servicios de Back4App, como bases de datos y funciones en la nube.

Introducción del proyecto

En este tutorial, construirás una aplicación básica usando Next.js. Esta aplicación obtendrá consejos aleatorios de una API externa utilizando la API fetch. La aplicación mostrará los consejos en la interfaz de la aplicación web que construirás.

Puedes omitir la construcción de la aplicación Next.js para desplegar la aplicación en Back4app. Encuentra el código fuente final de la aplicación en este repositorio de GitHub.

Requisitos previos

Para seguir con este tutorial y desplegar tu aplicación Next.js en Back4app, necesitas satisfacer los siguientes prerrequisitos.

Asegúrate de que tienes:

• Comprensión de los conceptos de la biblioteca React
• Experiencia con Docker, incluida la instalación de Docker
• Familiaridad con Node.js y NPM
• Git instalado en tu ordenador y una cuenta de GitHub.

Codificación de la aplicación Next.js

Para crear el andamio para la aplicación Next.js, ejecuta el siguiente comando en tu terminal node.js:

npx create-next-app@latest

Al ejecutar el comando anterior, aparecerán una serie de mensajes en el terminal. Estos mensajes son para que configures tu aplicación Next.js.

Las indicaciones serán similares a esta captura de pantalla del terminal.

Next.js configura tu aplicación para que coincida con tus respuestas. No necesitarás App Router y Tailwind CSS en esta aplicación. Selecciona No para esas opciones.

Una vez creada tu aplicación, empieza a construir la interfaz.

En primer lugar, añada los siguientes estilos globales al archivo globals.css:

/* globals.css */
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body{
  background-color: #151E3D;
  color: #8BACD9;
  inline-size: 60%;
  margin: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button{
  padding: 0.7rem 1rem;
  border-radius: 12px;
  background-color: aqua;
  color: #8BACD9;
  border: none;
}

button:hover{
  background-color: #151E3D;
  color: #8BACD9;
}

Puedes encontrar el archivo globals. css en la carpeta styles del directorio src. Después de añadir los estilos globales, para aplicarlos a tu aplicación, importa el archivo globals.css a tu archivo _app.tsx en el directorio pages.

Antes de importar el archivo globals.css en el archivo _app.tsx, es necesario crear un componente de diseño para definir el diseño de la aplicación.

Para ello, cree una carpeta de componentes en el directorio src y un archivo Layout.tsx dentro de esa carpeta. En el archivo Layout. tsx, escriba el siguiente código:

// Layout.tsx
import React from "react";
import styles from "../styles/Home.module.css";
import { Comforter } from "next/font/google";

const comforter = Comforter({
  weight: ["400"],
  subsets: ["latin"],
});

function Layout(props: any) {
  return (
    <>
      <header className={styles.header}>
        <h1 className={comforter.className}>Advice Generator</h1>
      </header>
      {props.children}
    </>
  );
}

export default Layout;

El bloque de código anterior define un componente Layout. En el componente Layout, se importan los estilos del archivo Home.module.css y la función Comforter del módulo next/font/google.

Mediante la función Comforter, configure la fuente comforter y aplíquela al elemento h1 de su cabecera estableciendo la propiedad className en comforter.className.

La expresión props.children renderizará los componentes hijos dentro del componente Layout.

También debe definir su estilo de cabecera en el archivo Home.module.css y los demás estilos necesarios.

Por ejemplo:

/* Home.module.css */
.header{
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  margin-block-start: 15%;
  margin-block-end: 1rem;
  opacity: 0.6;
}

.card{
  inline-size: 100%;
  margin: auto;
  border-radius: 12px;
  background-color: aqua;
  padding: 4rem 0;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  align-items: center;
}

.card h3{
  color: #333333;
  text-transform: uppercase;
  letter-spacing: 0.2rem; 
}

@media (max-width: 768px) {

  .header{
    margin-block-start: 30%;
  }

  .card{
      font-size: 12px;
      padding: 2rem;
  }

}

Ahora, importe el archivo global.css y el componente Layout en el archivo _app.tsx y envuelva su aplicación en el componente Layout:

// _app.tsx
import Layout from "@/components/Layout";
import "@/styles/globals.css";
import type { AppProps } from "next/app";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
}

Ha definido el diseño de su aplicación. A continuación, puede obtener los consejos de la API y mostrarlos en la aplicación. Para ello, utilizará el archivo index.tsx del directorio pages.

En el archivo index.tsx, reemplaza el código existente con el siguiente código:

// index.tsx
import React from "react";
import styles from "../styles/Home.module.css";
import { Montserrat } from "next/font/google";

const montserrat = Montserrat({ weight: ["100", "400"], subsets: ["latin"] });

export default function Home() {
  const [advice, setAdvice] = React.useState("");
  const [count, setCount] = React.useState(1);

  function handleClick() {
    setCount((prevState) => prevState + 1);
  }

  React.useEffect(() => {
    fetch("<https://api.adviceslip.com/advice>")
      .then((res) => res.json())
      .then((data) => setAdvice(data.slip.advice));
  }, [count]);

  return (
    <main>
      <div className={styles.card}>
        <h3 className={montserrat.className}>Advice No{count}</h3>
        <p className={montserrat.className}>{advice}</p>
        <button className={montserrat.className} onClick={handleClick}>
          generate
        </button>
      </div>
    </main>
  );
}

El bloque de código define la página de inicio. Importa la biblioteca React, Home.module.css para el estilo y la fuente de Google Montserrat de la biblioteca de fuentes Next.js.

El hook useEffect es una potente herramienta que te permite realizar efectos secundarios en componentes React. En esta aplicación, has utilizado el hook useEffect para obtener el consejo de tu API. El consejo obtenido de la API se establece en el estado de consejo.

El hook useEffect se ejecutará inicialmente cuando el componente se renderice y luego de nuevo cada vez que el valor del estado de recuento cambie. Esto se debe a que ha establecido el estado de recuento como el valor de la matriz de dependencia.

Cuando hagas clic en el botón Generar, se ejecutará la función handleClick, incrementando el estado de recuento en 1. Esto hace que el gancho useEffect se ejecute de nuevo, obtenga nuevos consejos de la API y actualice el estado de los consejos. Cada vez que pulses el botón generar, aparecerá un nuevo consejo en tu pantalla.

Tu aplicación Next.js está completa.

Para iniciar la aplicación, ejecute el siguiente comando:

npm run dev

La aplicación debe ejecutarse en su servidor local http://localhost:3000.

Al hacer clic en el botón “Generar” se obtendrá y mostrará un nuevo consejo. También incrementará el “número de consejo” en 1 cada vez.

Dockerizar la aplicación

Antes de desplegar la aplicación Next.js en Back4app, debes dockerizar la aplicación. Dockerizar una aplicación empaquetará tu aplicación y sus dependencias en contenedores Docker.

Los contenedores Docker proporcionan una forma ligera, aislada y portátil de ejecutar sus aplicaciones con sus bibliotecas y configuraciones necesarias.

Esto facilita el despliegue de tus aplicaciones en cualquier máquina con Docker instalado. Dockerizar su aplicación simplifica el despliegue, mejora la portabilidad, la escalabilidad, etc.

A continuación se muestra una guía paso a paso sobre cómo puede dockerizar su aplicación Next.js:

Paso 1: Crear un Dockerfile en la raíz del proyecto
Crea un nuevo archivo llamado Dockerfile en el directorio raíz de tu proyecto Next.js. Este archivo contendrá las instrucciones para que Docker construya una imagen de tu aplicación.

Paso 2: Defina su Dockerfile
En el Dockerfile, introduzca el siguiente código:

FROM node:latest
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "run", "start"]

Este Dockerfile hace lo siguiente:

• Parte del runtime oficial de Node.js 14.
• Establece el directorio de trabajo en /app.
• Copia package.json y package-lock.json en la imagen Docker e instala las dependencias.
• Copia el resto del código de la aplicación en la imagen Docker.
• Crea la aplicación Next.js.
• Expone el puerto 3000 para la aplicación.
• Define el comando para iniciar la aplicación.

Estas especificaciones describen el entorno en el que se ejecutará su aplicación.

Paso 3: Crear la imagen Docker

Ejecute el siguiente comando en su terminal para construir la imagen Docker:

docker build -t advice-generator .

Puede sustituir “advice-generator” por el nombre que desee dar a su imagen Docker.

Ejecutar el contenedor Docker

Una vez creada la imagen, puede ejecutarla como contenedor con el siguiente comando:

docker run -p 3000:3000 advice-generator 

Este comando asigna el puerto 3000 del contenedor Docker al puerto 3000 de su máquina.

Siguiendo estos pasos ejecutarás tu aplicación Next.js en un contenedor Docker. Puedes acceder a ella navegando a http://localhost:3000 en tu navegador web.

Cómo enviar tu aplicación Next.js a GitHub

Después de dockerizar la aplicación, necesitas empujar la aplicación a un repositorio de GitHub. Para empujar la aplicación a un repositorio de GitHub, crea un nuevo repositorio dentro de tu cuenta de GitHub y ejecuta los siguientes comandos en el directorio de tu aplicación en tu terminal:

git init
git add .
git remote add origin <your-repository-url> 
git commit -m 'initial commit'
git branch -M main
git push -u origin main

• git init: Este comando inicializa un nuevo repositorio Git en tu directorio actual.
• git add: Este comando añade todos los archivos de tu directorio actual al área de staging.
• git remote add origin : Este comando enlaza su repositorio local a un repositorio remoto. Sustituye por la URL de su repositorio remoto.
• git commit -m ‘initial commit’: Este comando toma todos los cambios escritos en el área de preparación y los almacena en un nuevo commit.
• git branch -M main: Este comando crea una nueva rama llamada main y cambia a ella.
• git push -u origin main: Este comando empuja tus commits en tu rama principal al repositorio remoto origin.

Despliegue de la aplicación en Back4app

Para desplegar su aplicación en Back4app, primero debe crear una cuenta Back4app. Para ello, siga estos pasos:

1. Visita el sitio web de Back4app.
2. Haga clic en el botón “Inscribirse”.
3. Rellene el formulario de inscripción y envíelo.

Si usted ya tiene una cuenta Back4app, puede simplemente iniciar sesión y proceder al siguiente paso.

Después de crear una cuenta, acceda a ella y haga clic en “Nueva aplicación”.

botón . Encontrará el botón en la esquina superior derecha de la pantalla.

Aparecerá una pantalla similar a la que se muestra a continuación.

Seleccione la opción Contenedor como servicio para crear y desplegar su aplicación utilizando contenedores. La compilación no debería llevar mucho tiempo. Una vez finalizada, vincula tu cuenta de GitHub a la aplicación CaaS creada.

A continuación, selecciona el repositorio que deseas desplegar desde tu cuenta de GitHub vinculada en la aplicación Back4app.

Ahora que has seleccionado un repositorio, todo lo que queda es desplegar la aplicación. Antes de hacerlo, tendrás que darle un nombre y configurar su despliegue.

Haga clic en el botón “Crear aplicación” para desplegar su aplicación.

Felicitaciones, usted ha desplegado exitosamente su aplicación en Back4app. Puede acceder a la aplicación en la web navegando al enlace proporcionado por Back4app en la pantalla de arriba.

Conclusión

Next.js es un framework de código abierto para construir aplicaciones React renderizadas del lado del servidor (SSR). También ofrece muchas ventajas, como la generación de sitios estáticos, la división automática del código, el enrutamiento integrado, las rutas API, etc. Estas ventajas hacen de Next.js un potente framework.

Desplegar una aplicación Next.js utilizando el CaaS de Back4pp simplifica el proceso de desarrollo. La plataforma Back4app CaaS es una solución escalable, segura y rentable para desplegar aplicaciones Next.js.

Su interfaz fácil de usar, las actualizaciones en tiempo real, la compatibilidad con API GraphQL y REST, las copias de seguridad automatizadas y el entorno sin servidor lo convierten en una opción perfecta para los desarrolladores.

PREGUNTAS FRECUENTES