Guía para crear y desplegar una aplicación de Next.js

Desarrollar una aplicación de Next.js es solo la fase inicial; el siguiente paso crucial es el despliegue. Este proceso consiste en poner tu aplicación a disposición de los usuarios en Internet. Una estrategia de implementación eficaz es fundamental para garantizar el rendimiento, la escalabilidad y la fiabilidad de tu aplicación. Esta guía te explicará los pasos que debes seguir para desplegar tu aplicación de Next.js correctamente.

Ejecuta tu aplicación de Next.js en Cloud Run

¿Qué es el framework Next.js?

Next.js es un framework de React que se basa en React y añade funciones que facilitan la creación y la optimización automática de sitios web listos para la producción. 

En pocas palabras, Next.js es un framework que te ayuda a crear aplicaciones modernas con React. Tiene compatibilidad con servidores, así como imágenes y componentes optimizados que permiten obtener resultados rápidos y, al mismo tiempo, mantener una transferencia de archivos pequeña.

Diferencias entre React (predeterminado) y Next.js

Aunque ambos se parecen y ejecutan JavaScript, hay grandes diferencias en lo que hacen y en sus funciones.

Función

React (predeterminado)

Next.js

Optimización para SEO

Puede ser difícil

Optimizado para SEO

Rendimiento de carga inicial

Más lento

Más rápido

Recuperación de datos

Requiere una implementación manual

Integrado con getServerSideProps y getStaticProps

Enrutamiento

Usa una biblioteca de enrutamiento (por ejemplo, React Router)

Enrutamiento basado en el sistema de archivos

Complejidad

Más sencillo

Más configurado desde el primer momento

Función

React (predeterminado)

Next.js

Optimización para SEO

Puede ser difícil

Optimizado para SEO

Rendimiento de carga inicial

Más lento

Más rápido

Recuperación de datos

Requiere una implementación manual

Integrado con getServerSideProps y getStaticProps

Enrutamiento

Usa una biblioteca de enrutamiento (por ejemplo, React Router)

Enrutamiento basado en el sistema de archivos

Complejidad

Más sencillo

Más configurado desde el primer momento

Cómo crear una aplicación de Next.js

En muchas aplicaciones de React, los pasos suelen ser los mismos, pero te recomendamos que uses el framework Next.js. Para cumplir los requisitos de alto rendimiento y nivel avanzado, este framework gestionará muchos componentes que ayudan a escalar tu aplicación de forma más eficiente y a optimizar el SEO de tu sitio de React.

Deberás generar la plantilla usando el terminal para que aparezcan todos los detalles y los requisitos de código. 

Usa el terminal:

npx create-next-app@latest

Para seguir los pasos, también necesitarás aplicar algunas configuraciones.

Necesitarás las instrucciones sobre lo que es necesario, lo que necesitas (información del servidor o del cliente) y dónde se encuentra. Esto es lo que puedes esperar de la compilación que se va a crear.

"Esto es para mejorar el rendimiento y la velocidad".

Una vez más, esto puede ayudarte a asegurarte de que tienes las piezas listas para crear los componentes que quieras del lado del servidor o del cliente.

Ahora actualiza el código y haz que el diseño quede bien.

Puede que necesites información sobre este tema, así que consulta esta documentación.

Ahora que has hecho estos cambios, la configuración está completa. Deja que se renderice.

Consideraciones clave al crear una aplicación de Next.js

Para la optimización en buscadores, la velocidad de tu sitio web es crucial. El JavaScript, por sí solo, puede ralentizar el renderizado y afectar negativamente al rendimiento de búsqueda. Sin embargo, usar Next.js puede mitigar este problema. Por eso, debes priorizar una experiencia de carga rápida y una gestión de datos eficiente en tu sitio. Para conseguir una seguridad sólida y productos de primera calidad, es necesario usar los datos de prueba con cuidado y cumplir las políticas de privacidad y acceso.

Enrutamiento del lado del cliente

La mayoría de las aplicaciones de React usan una biblioteca como react-router-dom para gestionar la navegación. Como esto ocurre en el navegador, tu servidor de alojamiento debe estar configurado para admitirlo. Normalmente, esto implica dirigir todas las solicitudes de página a tu archivo raíz index.html, lo que permite que React Router se haga cargo y muestre el componente correcto.

Variables de entorno

Es probable que tu aplicación necesite diferentes configuraciones para el desarrollo y la producción, como claves de API o endpoints de bases de datos. Es fundamental gestionarlas mediante variables de entorno (por ejemplo, a través de archivos .env) para no exponer información sensible en el código fuente.

Comunicación con la API de backend

Un frontend de React se encarga de la interfaz de usuario, pero suele obtener sus datos dinámicos de una API de backend. Al implementarla, debes asegurarte de que tu aplicación de React sepa la URL correcta de tu API de producción y esté configurada para gestionar el uso compartido de recursos entre dominios (CORS) si la API está alojada en un dominio diferente.


Cómo desplegar una aplicación de Next.js en Cloud Run

Cloud Run puede ser una buena opción para desplegar una aplicación de React si quieres usar un flujo de trabajo basado en contenedores, que ofrece la máxima coherencia y portabilidad. Empieza con la guía de inicio rápido para crear y desplegar aplicaciones de React con Next.js en Cloud Run. 

Paso 1: Asegúrate de que la aplicación sea la correcta

Para transferir correctamente: Asegúrate de que has implementado todos los detalles relevantes para los ajustes de datos y de transferencia.

Paso 2: Siguiente compilación; creación de Docker

Siguiendo estos pasos, asegúrate de que cada fase tenga todos los detalles necesarios para el proyecto.

# Instala las dependencias solo cuando sea necesario

FROM node:16-alpine AS deps

# Lee https://github.com/nodejs/docker-node/tree/b4117f933ba60658f2812f36b8

117330a1dc25ab#alpine

RUN apk add --no-cache libc6-compat

WORKDIR /app

COPY package.json package-lock.json ./

RUN npm ci


# Si usas turbo, elimina los comentarios de esta sección también:

# COPY turbo.json ./

# COPY .gitignore ./


# Añade la variable de entorno

ENV NEXT_TELEMETRY_DISABLED 1


# Vuelve a crear el hook para comprobar qué se incluye y qué no

RUN npm run build


###############

#### Fase 2: Imagen de producción ###

###############


 FROM node:16-alpine AS runner


WORKDIR /app


# NEXT_PUBLIC_... Variables ENV durante el tiempo de compilación.

ENV NODE_ENV production


# Si estás usando un archivo de configuración personalizado, solo necesitas copiar el archivo next.config.js

COPY --from=builder /app/next.config.js ./

COPY --from=builder /app/public ./public

COPY --from=builder /app/.next ./.next

COPY --from=builder /app/node_modules ./node_modules

COPY --from=builder /app/package.json ./package.json


# Consulta más información en: https://cloud.google.com/run/docs

/configuring/traffic

ENV PORT 8080


EXPOSE 8080


CMD ["npm", "start"]

# Instala las dependencias solo cuando sea necesario

FROM node:16-alpine AS deps

# Lee https://github.com/nodejs/docker-node/tree/b4117f933ba60658f2812f36b8

117330a1dc25ab#alpine

RUN apk add --no-cache libc6-compat

WORKDIR /app

COPY package.json package-lock.json ./

RUN npm ci


# Si usas turbo, elimina los comentarios de esta sección también:

# COPY turbo.json ./

# COPY .gitignore ./


# Añade la variable de entorno

ENV NEXT_TELEMETRY_DISABLED 1


# Vuelve a crear el hook para comprobar qué se incluye y qué no

RUN npm run build


###############

#### Fase 2: Imagen de producción ###

###############


 FROM node:16-alpine AS runner


WORKDIR /app


# NEXT_PUBLIC_... Variables ENV durante el tiempo de compilación.

ENV NODE_ENV production


# Si estás usando un archivo de configuración personalizado, solo necesitas copiar el archivo next.config.js

COPY --from=builder /app/next.config.js ./

COPY --from=builder /app/public ./public

COPY --from=builder /app/.next ./.next

COPY --from=builder /app/node_modules ./node_modules

COPY --from=builder /app/package.json ./package.json


# Consulta más información en: https://cloud.google.com/run/docs

/configuring/traffic

ENV PORT 8080


EXPOSE 8080


CMD ["npm", "start"]

Ahora debes iniciar el despliegue. Usa una plataforma como Cloud Build y conecta los archivos de configuración.

Paso 3: Usa la nube para el lanzamiento

Ahora, deja que Cloud Run sea el método final para gestionarlo, teniendo en cuenta si ayuda y es correcto. Asegúrate de que las herramientas y el código principales funcionen correctamente.

Cómo desplegar una aplicación de Next.js en Firebase

Firebase también puede ser un buen lugar para desplegar tu aplicación, así que recuerda estos sencillos pasos. ¿Quieres integrar Next.js en Firebase? Sigue los pasos con la documentación completa.

Paso 1: Tenlo todo listo para los ajustes del servidor público

Sigue las configuraciones que requiera esta imagen o documento (se necesita SSL) para que todo funcione de forma segura.

Paso 2: Configura e instala (CMD)

Comprueba cómo se ha instalado la CLI y Firebase, y si están funcionando.

npm install -g firebase-tools

Paso 3: Conecta y configura el proyecto

Sigue los pasos de "Firebase Init - Hosting".

Asegúrate de que la URL se reescribe y de que es correcta en la línea de comandos.

Usa "no" para asegurarte de que no haya problemas cuando se despliegue todo.

Soluciona los retos empresariales que se te presenten con Google Cloud

Los nuevos clientes reciben 300 USD en crédito gratis para invertirlos en Google Cloud.

Prácticas recomendadas para tus pruebas

Para hacer pruebas locales, necesitarás un código de host local.

Después de autenticar la CLI, insértala en este repositorio:

  • gcloud auth configure-docker

Ahora, debes subir:

  • docker tag [IMAGE_NAME] gcr.io/[PROJECT-ID]/[IMAGE_NAME]
  • Imágenes del contenedor de gcloud y continuar con el envío

Para ver la lista completa de consejos generales de desarrollo en Cloud Run, consulta esta documentación.

Ve un paso más allá

Empieza a crear en Google Cloud con 300 USD en crédito gratis y más de 20 productos Always Free.

Google Cloud
DocumentosAsistencia
Consola
Iniciar sesión
  • Agiliza tu transformación digital
  • Tanto si tu negocio ya está inmerso en la transformación digital como si aún se encuentra en la etapa inicial, Google Cloud puede ayudarte a hacer frente a los retos más difíciles.
  • Productos de Google Cloud
  • Descubre más de 100 productos. Los nuevos clientes reciben 300 USD en crédito gratis para ejecutar, probar y desplegar cargas de trabajo. Todos los clientes pueden usar más de 25 productos de forma gratuita hasta alcanzar los límites de uso mensuales.
  • Ahorra dinero con nuestro enfoque de transparencia sobre los precios
  • El modelo de pago por uso de Google Cloud ofrece ahorros automáticos en función del uso mensual y de las tarifas con descuento para los recursos de prepago. Ponte en contacto con nosotros y solicita un presupuesto.
Google Cloud