Despliegue de un Proyecto React con Next.js en Vercel (Vía Sitio Web)

Realizar el despliegue de un proyecto es un paso crucial en el desarrollo web. Entre tantas plataformas de hospedaje que existen hoy en día, Vercel se destaca por su facilidad de uso y por su integración perfecta con frameworks como Next.js. En este artículo, vamos a hacer juntos el despliegue directamente desde el sitio de Vercel de un proyecto en React con Next.js, de forma simple y eficaz, para que tú también puedas aplicarlo en tus proyectos.

Si aún no entiendes de qué estoy hablando, vamos por partes: ¿qué tal revisar qué es React, Next.js y Vercel, y por qué son una combinación tan poderosa para el desarrollo e implementación de aplicaciones web modernas?

¿Qué es React?

React es una biblioteca de JavaScript de código abierto desarrollada por Facebook que permite a los desarrolladores construir interfaces de usuario interactivas y dinámicas para aplicaciones web y móviles. Utiliza un modelo de componentes reutilizables, donde cada parte de la interfaz está encapsulada en componentes independientes, facilitando el desarrollo, mantenimiento y escalabilidad de aplicaciones. Además, esta biblioteca emplea un enfoque de "renderizado virtual" para optimizar el rendimiento, actualizando solo partes específicas de la interfaz cuando es necesario, lo cual resulta en una experiencia de usuario más rápida y fluida.

¿Qué es Next.js?

Next.js es un framework de código abierto construido sobre React que simplifica el desarrollo web. Se destaca por ofrecer renderizado del lado del servidor (SSR) para mejorar el rendimiento y el SEO, integración fácil con TypeScript, un sistema de rutas intuitivo y soporte para diversos plugins, convirtiéndolo en una opción popular para crear aplicaciones web modernas y eficientes. Para utilizar Next.js, necesitas tener Node.js instalado en tu terminal. Si estás usando un sistema operativo Mac o Windows, puedes acceder a https://nodejs.org/en/ para descargar la versión LTS (Long Term Support) más reciente y estable de Node.js y, luego, instalarlo con el archivo descargado. Si usas Linux, puedes ejecutar las siguientes líneas de comando en tu terminal para instalar Node.js:

sudo apt-get update
sudo apt-get install node.js

Si la instalación de Node se completó correctamente, al ejecutar el siguiente comando, verás en tu terminal la versión de Node instalada:

node --version

¿Qué es Vercel?

Vercel es una plataforma de hospedaje de aplicaciones web que se destaca por su especialización en aplicaciones front-end y ofrece una variedad de recursos y beneficios para desarrolladores.

Es ampliamente reconocida por su eficacia en el hospedaje de proyectos creados con frameworks populares de front-end, como Next.js y React, aunque también es adecuada para una variedad de otros frameworks y tecnologías. Con soporte para dominios personalizados, certificados SSL gratuitos y una serie de herramientas de colaboración y monitoreo, Vercel se convierte en una elección preferida para quienes buscan una plataforma robusta y fácil de usar para alojar sus proyectos web.

Debes tener una cuenta en Vercel para realizar el despliegue ahí. Si no tienes una, puedes crear una cuenta gratuita haciendo clic aqui y registrándote.

Primeros pasos

Ahora, con la cuenta en Vercel creada y Node.js instalado para usar Next.js, continuemos con el paso a paso. Primero, crea un proyecto React en tu computadora mediante el siguiente código:

npx create-next-app pokedex

Responde a las preguntas que aparecerán de acuerdo con las configuraciones que deseas para tu aplicación y, al completar todos los pasos, abre un terminal en el directorio raíz de tu aplicación. Si todo salió bien, la siguiente página estará disponible en el endpoint proporcionado en el terminal:

Después de esto, en GitHub, vamos a crear un repositorio que almacenará el proyecto que tenemos. En la página de inicio de GitHub, haz clic en el botón "new". Luego, completa los datos necesarios (propietario, nombre del repositorio y descripción), mantén el repositorio como público y, finalmente, haz clic en “Crear repositorio”.

Una vez realizadas todas estas configuraciones en GitHub, debes ejecutar, en un terminal abierto en el directorio raíz de tu proyecto, los siguientes comandos para realizar el "push" de tu aplicación a GitHub:

git add .
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin git@github.com {usuário}/{projeto}.git
git push -u origin main

Nota - Sustituye “{usuario}” por tu nombre de usuario existente en GitHub. Haz lo mismo para “{proyecto}”, insertando el nombre exacto que le diste al proyecto al crearlo.

Una vez que tu proyecto esté correctamente actualizado y almacenado en GitHub, podemos pasar a Vercel.

Configurando Vercel

En el panel principal de Vercel (después de haber iniciado sesión correctamente), debes seguir los siguientes pasos:

1. Haz clic en el botón “Add New…”. Aparecerán varias opciones, pero debes elegir la opción Project. Serás dirigido a una nueva página, donde podrás configurar en cuál de tus cuentas de GitHub, en caso de tener más de una, está ubicado el proyecto.

2. Debajo de Import Git Repository, asegúrate de que el usuario correcto esté conectado y, si no lo es, realiza el cambio en “Add Github Account”.

Nota: En este ejemplo usamos la integración entre Vercel y GitHub, pero también puedes usar GitLab o Bitbucket sin problemas, sin grandes cambios.

3. Busca el proyecto por el nombre que le diste al crearlo:

4. Después de conectar el repositorio, Vercel detecta automáticamente el tipo de proyecto. En el caso de un proyecto Next.js, se identificará como un proyecto Node.js, como se muestra en la figura 4.

5. Al encontrar tu repositorio, haz clic en “Import”.

6. Elige un nombre para tu proyecto en Vercel. Este nombre se usará en la URL de la aplicación.

7. Configura las opciones de implementación, como la rama a desplegar y el directorio donde se encuentra el proyecto.

8. Este también es el momento de crear variables de entorno, si es necesario. Las variables de entorno son valores demasiado confidenciales para estar dentro del código que estamos desarrollando. Estas variables se usan para almacenar información temporal o configuraciones que pueden ser accedidas por el sistema operativo o aplicaciones en ejecución. Comúnmente se usan para guardar datos de conexión de manera segura, como el usuario y contraseña de una base de datos, o el puerto en el que funciona, etc. Como estas no se envían a repositorios públicos (para evitar filtrar información confidencial), necesitamos crearlas en Vercel.

Nota: Si necesitas crear variables de entorno que funcionen en el lado del cliente, puedes crearlas con el prefijo “NEXT_PUBLIC_” seguido del nombre de la variable, además de crearlas dentro de un archivo .env.local en el directorio raíz del proyecto.

9. Finalmente, haz clic en Deploy y espera a que se complete el proceso.

Vercel iniciará el proceso de implementación, y podrás seguir el progreso directamente en el panel. Tras la implementación exitosa, Vercel proporcionará una URL pública donde tu aplicación estará accesible en la web. Puedes acceder a esta URL para verificar el funcionamiento de tu aplicación.

Desde el panel de Vercel, puedes gestionar tu proyecto, configurar dominios personalizados, definir variables de entorno y mucho más.

Finalmente, si deseas actualizar tu proyecto, solo tienes que actualizar la versión almacenada en el repositorio de GitHub que integraste con Vercel, y automáticamente, después de algunos minutos, tu versión en despliegue también se actualizará.

Consideraciones finales

Realizar el despliegue de un proyecto React con Next.js en Vercel directamente desde el sitio de la plataforma es un proceso sencillo y eficaz. Vercel ofrece una plataforma sólida para alojar aplicaciones front-end, y su integración con Next.js es fluida e intuitiva. Recuerda que, al desplegar en un entorno de producción, es fundamental asegurarte de que tu código esté optimizado, configurar las variables de entorno adecuadas y considerar la escalabilidad de tu aplicación.

Esperamos que aproveches al máximo las potentes herramientas y recursos que estas tecnologías ofrecen para crear aplicaciones web increíbles y compartirlas con el mundo, incluyendo con nosotros. Después de leer este artículo, ya estás listo para desplegar tu proyecto Next.js en Vercel a través de la plataforma, simplificando el proceso y compartiendo tus creaciones de manera eficiente.

¡Practica, repite y enseña, ya que no hay mejor forma de afianzar el conocimiento adquirido! Si este artículo te pareció interesante, tienes alguna duda o simplemente quieres intercambiar ideas sobre estos y otros temas, también puedes contactarme por medio del e-mail bruno.cabral.silva2018@gmail.com ¡o a través de mi perfil de LinkedIn!

¡Te espero con entusiasmo!