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

Crear una aplicación web de Next.js es solo el primer paso para llevar tus ideas a Internet. Para que tu aplicación sea rápida, adaptable y fácil de encontrar para los usuarios, debes elegir la configuración de despliegue adecuada.

Tanto si usas peticiones en lenguaje natural para crear prototipos web de IA como si despliegas bases de código full stack exportadas de herramientas como Claude Code o Replit, las plataformas en la nube modernas ofrecen vías de alojamiento sin complicaciones. En esta guía se explica cómo funciona Next.js, se abordan consideraciones clave sobre la arquitectura de renderizado y se describe cómo desplegar tu aplicación en una infraestructura gestionada mediante las opciones sin coste económico de Starter Tier.

Vídeo sobre cómo ejecutar tu aplicación de Next.js en Cloud Run

12:22

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

¿Qué es Next.js?

Next.js es un framework de React de código abierto diseñado para ayudar a los desarrolladores a crear aplicaciones web full stack. Mientras que las aplicaciones de React estándar suelen ejecutarse en el navegador web del cliente, Next.js combina la interactividad del lado del cliente con el renderizado del lado del servidor.

Al gestionar automáticamente el enrutamiento de páginas, los componentes del servidor y la optimización de recursos, Next.js permite a los desarrolladores y a los programadores de IA convertir conceptos creativos en aplicaciones web listas para la producción con una configuración mínima.

React tradicional frente a Next.js

La elección entre React estándar y Next.js depende de tus requisitos de renderizado, visibilidad en buscadores y necesidades de backend:

Característica	React (predeterminado)	Next.js
Arquitectura de renderizado	Renderizado del lado del cliente (CSR)	Renderizado del lado del servidor (SSR), generación de sitios estáticos (SSG) y componentes de servidor de React
Optimización en buscadores (SEO)	Puede requerir una configuración de prerrenderizado adicional	Compatible con buscadores desde el primer momento con HTML renderizado en el servidor
Carga de la página inicial	Más lento en dispositivos de baja potencia debido a los grandes paquetes de JavaScript del cliente	Visualización inicial más rápida mediante HTML ligero renderizado en el servidor
Mecanismo de enrutamiento	Requiere bibliotecas de enrutamiento de terceros (como React Router)	Enrutamiento integrado basado en el sistema de archivos mediante App Router
Funciones full stack	Solo frontend; requiere un servicio de backend independiente	Controladores de rutas de API y acciones de servidor integrados

Alojamiento de aplicaciones tradicional frente a contenedores sin servidor

A la hora de preparar el lanzamiento de una aplicación de Next.js, elegir el entorno de computación adecuado influye directamente en la sobrecarga de mantenimiento, la velocidad de escalado y los costes operativos.

Función	Máquinas virtuales (VPS/IaaS)	Plataformas de PaaS o paquete de compilación	Contenedores sin servidor (Cloud Run)
Gestión de infraestructuras	Alto; actualizaciones manuales del sistema operativo y parches de servidores	Capa de plataforma totalmente gestionada con convenciones específicas del proveedor	Infraestructura totalmente gestionada sin mantenimiento del sistema operativo
Comportamiento del autoescalado	Se tarda varios minutos en aprovisionar e iniciar nuevas máquinas virtuales	Autoescalado rápido, a menudo vinculado a planes de trabajadores por niveles o límites de simultaneidad	Autoescalado instantáneo basado en solicitudes, incluido el escalado a cero cuando está inactivo
Formato de empaquetado	Archivos de compilación sin procesar o gestores de procesos PM2	Integración de repositorios de Git con sistemas de compilación propios	Imágenes de contenedor estándar de Open Container Initiative (OCI) y Docker
Perfil de costes de inactividad	Se factura las 24 horas, independientemente del tráfico entrante	Tarifa mensual básica o límites de ejecución estrictos en los niveles sin coste económico	Asignación sin coste económico de Starter Tier o facturación estricta por segundo durante las solicitudes activas
Portabilidad de proveedores	Alto, pero la configuración puede ser difícil de replicar	Bajo; las configuraciones dependen de las reglas de alojamiento específicas del proveedor	Alta; las imágenes de contenedor estándar se ejecutan en cualquier entorno local o en la nube

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

Para crear una aplicación de Next.js lista para producción, es necesario abordar patrones de arquitectura básicos que garanticen un rendimiento rápido y un tiempo de funcionamiento estable:

Límites del cliente y del servidor

Next.js usa componentes de servidor de React de forma predeterminada [Inferencia]. Los componentes del servidor obtienen datos directamente sin enviar JavaScript pesado al navegador, mientras que los elementos interactivos de la interfaz de usuario utilizan la directiva "use client" [Inferencia]. Mantén los componentes del cliente centrados en tareas de interfaz de usuario interactivas para que el paquete del cliente sea pequeño y rápido [Inferencia].

Variables de entorno de cliente

Para evitar que se filtren claves de API privadas o credenciales de bases de datos al navegador público, Next.js restringe el acceso del navegador a las variables con el prefijo NEXT_PUBLIC_. Mantén siempre los secretos de servidor privados sin prefijo y gestiónalos de forma segura en las configuraciones de entorno.

Ejecución sin servidor y sin reconocimiento del estado

Las plataformas modernas sin servidor activan y desactivan instancias de contenedores en respuesta al tráfico entrante. Los archivos guardados directamente en discos de contenedores locales desaparecen cuando las instancias se reducen verticalmente o se vuelven a desplegar. Almacena datos de aplicaciones persistentes en bases de datos en la nube gestionadas, como Cloud Firestore o Cloud SQL para PostgreSQL, y almacena las subidas de los usuarios en Cloud Storage.

Rastreo de salida independiente

En los despliegues de contenedores personalizados, habilita output: 'standalone' en tu configuración de Next.js [Inferencia]. Esto rastrea automáticamente las dependencias y agrupa solo los archivos necesarios en una carpeta de compilación compacta, lo que reduce el tamaño de la imagen del contenedor y acelera el inicio del contenedor [Inferencia].

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

Puedes crear y lanzar tu aplicación Next.js mediante dos flujos de trabajo principales: creación rápida de prototipos de IA (no se necesita configurar la CLI local) o despliegue de contenedores estándar (para bases de código personalizadas).

Itinerario A: Prototipado rápido con el modo Creación de AI Studio y el nivel Starter

Para flujos de trabajo de creación rápida de prototipos y programación intuitiva, el modo Desarrollo de Google AI Studio permite a los desarrolladores describir aplicaciones full stack de Next.js en lenguaje natural y publicarlas directamente en Cloud Run sin tener que gestionar herramientas de línea de comandos ni configurar una cuenta de facturación.

Paso 1: Inicializar la aplicación en el modo Desarrollo

Ve a Google AI Studio y cambia al modo Desarrollo.
Introduce la petición de tu aplicación describiendo la interfaz de usuario, el estilo y la lógica empresarial (por ejemplo, "Crea un sistema de seguimiento de proyectos colaborativos en Next.js con paneles de tareas interactivos e inicio de sesión de usuario").
El agente de IA integrado genera los archivos de componentes de Next.js, configura los diseños de App Router, instala las dependencias de npm y muestra una vista previa interactiva en directo directamente en tu navegador.

Paso 2: Añadir almacenamiento de base de datos integrado e inicio de sesión de usuario

Datos persistentes: si tu petición requiere almacenamiento de datos, habilita Cloud Firestore o Cloud SQL para PostgreSQL (Developer Edition). El agente redacta automáticamente tus modelos de datos, archivos de conexión de clientes y reglas de seguridad.
Autenticación de usuarios: activa Firebase Authentication para habilitar los flujos de inicio de sesión de Google sin tener que escribir controladores de redirección de OAuth personalizados.

Paso 3: Publicar en Cloud Run

Haz clic en Publish > Get Started > Publish App (Publicar > Empezar > Publicar aplicación) en la interfaz superior.
Introduce tu URL personalizada <my-nextjs-app>.ai.studio y confirma la región de despliegue.
La plataforma empaqueta tu contenedor, aprovisiona la computación subyacente y te proporciona una URL de producción HTTPS *.run.app activa en cuestión de segundos.

Itinerario B: Desplegar un código base de Next.js personalizado en Cloud Run

Si tienes bases de código o proyectos exportados de herramientas como Claude Code, Replit o entornos de desarrollo locales, crea un contenedor para tu aplicación y despliégala con la Google Cloud CLI.

Paso 1: Configurar la salida independiente

Actualiza tu archivo next.config.js (o next.config.mjs) para producir una compilación independiente [Inferencia]:

Cargando...

Paso 2: Crea unr Dockerfile de varias etapas

Crea un archivo .dockerignore en tu carpeta raíz que contenga node_modules y .env para que los archivos de desarrollo locales no se incluyan en tu contenedor.

Crea un Dockerfile en la raíz de tu proyecto:

Cargando...

Paso 3: Desplegar en Cloud Run

Despliega directamente desde la carpeta de tu proyecto con la Google Cloud CLI y asigna una URL personalizada fácil de recordar y compartir con el formato <my-cool-app>.cloud.run:

Cargando...

Mecanismos de precios del nivel sin coste económico y Starter Tier

Si sabes cómo funcionan las asignaciones sin coste económico, podrás crear prototipos y escalar tu aplicación de Next.js de forma predecible:

Opción	Asignaciones de computación y recursos	Requisitos y límites
Starter Tier de Google Cloud (Prototipado)	• Cloud Run: hasta 2 aplicaciones web activas • Cloud Firestore: 1 GiB de almacenamiento, 50.000 lecturas al día y 40.000 escrituras al día • Cloud SQL: PostgreSQL Developer Edition (escalado a cero) • Firebase Authentication: inicio de sesión de Google incluido	• Cuenta de Google válida • No se necesita tarjeta de crédito ni cuenta de facturación • Recursos fijados a una sola región
Nivel sin coste económico de Google Cloud (cuenta estándar)	• Cloud Run: 2 millones de solicitudes al mes, 180.000 vCPU por segundo al mes, 360.000 GiB por segundo al mes y 1 GB de salida de red de Norteamérica al mes • Acceso a 300 USD de crédito de bienvenida durante los primeros 90	• Cuenta de facturación de Cloud vinculada • Acceso completo a la API de la plataforma en todas las regiones

Prácticas recomendadas para ejecutar Next.js en entornos sin servidor

Usa la salida independiente: habilita siempre el modo independiente de Next.js para evitar empaquetar dependencias de desarrollo no utilizadas en tus contenedores de producción [Inferencia].
Establece límites de instancias en los proyectos de pago: cuando pases de un entorno aislado de creación de prototipos a un entorno de producción, define --max-instances (por ejemplo, --max-instances 5) para asegurarte de que los picos de tráfico inesperados no superen tu presupuesto.
Aprovecha los componentes de servidor de React: traslada la obtención de datos intensiva a los componentes de servidor para que el paquete del navegador sea ligero y mejorar las Core Web Vitals [Inferencia].
Asegúrate de que las variables de entorno del cliente estén integradas: recuerda que las variables de entorno NEXT_PUBLIC_ se integran en los paquetes del cliente durante el tiempo de compilación. Asegúrate de que estén definidas antes de ejecutar la fase de compilación.