Next.Js despliegue en Cloudfare Pages
Sun Mar 17 2024
Next.Js despliegue en Cloudfare Pages
¿Quieres llevar tus proyectos Next.js al siguiente nivel de rendimiento? ¡Estás en el lugar correcto! En esta guía, te mostraré cómo alojar tus proyectos Next.js en Cloudflare pages para un rendimiento excepcional. Desde la configuración inicial hasta el despliegue en vivo, te guiaré a través de cada paso.
Conectando tu cuenta de Git con Cloudflare
Antes de comenzar, asegúrate de tener tu cuenta de Git conectada a Cloudflare. Esto te permitirá seleccionar fácilmente el proyecto Next.js que deseas desplegar.
Configuración de compilaciones y despliegues en Cloudflare
En la interfaz de Cloudflare, selecciona tu proyecto Next.js y sigue estos pasos:
- Configura el despliegue automático en la rama principal (master) para producción.
- Cloudflare detectará automáticamente tu proyecto Next.js y configurará el comando de compilación junto con la carpeta adecuada.
Especificando la versión de Node en las variables de entorno
Es crucial especificar la versión de Node que utiliza tu proyecto. Para hacer esto, asegúrate de tener la siguiente variable de entorno configurada:
NODE_VERSION = 20
Configurando el runtime en tu proyecto
Cloudflare Pages requiere que configures el runtime en tu proyecto Next.js para aprovechar al máximo las ventajas del Edge Runtime. Esto se logra agregando la siguiente línea en los archivos de tus páginas o rutas:
export const runtime = 'edge';
Esto permitirá que tus páginas se ejecuten en el Edge Runtime, lo que incluye tanto rutas estáticas como dinámicas, así como páginas que utilizan getServerSideProps o getInitialProps.
Habilitando nodejs_compat en tu proyecto Next.js
Para garantizar el correcto funcionamiento de tu aplicación, habilita nodejs_compat en la configuración de tu proyecto en Cloudflare Pages. Esto te permitirá ejecutar código del lado del servidor con todas las dependencias de Node.js. Una vez habilitado, vuelve a desplegar tu proyecto para aplicar los cambios.
Recursos adicionales y recomendaciones
Para obtener más información y resolver posibles problemas, te recomiendo consultar las guías oficiales de Cloudflare y Next.js:
¡Listo! Ahora estás preparado para desplegar tus proyectos Next.js en Cloudflare Pages y disfrutar de un rendimiento excepcional! 🚀🌐