Cómo desplegar Next.js en Cloudflare Pages

¿Tienes un proyecto de Next.js y quieres desplegarlo en la nube sin servidor? Cloudflare Pages es una excelente opción: es gratuito, rápido y fácil de configurar. En esta guía te muestro cómo desplegar tu proyecto paso a paso.

Requisitos previos

• Proyecto de Next.js funcionando localmente
• Cuenta de Cloudflare (gratuita)
• Código en GitHub o GitLab (recomendado), o archivos estáticos listos

Paso 1: Configurar Next.js para exportación estática

Antes de desplegar, necesitas configurar Next.js para generar archivos estáticos.

Abre tu archivo next.config.js (o next.config.ts) y agrega output: 'export':

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  output: 'export',
  // ... resto de tu configuración
};

export default nextConfig;

Esta configuración le indica a Next.js que genere archivos HTML, CSS y JavaScript estáticos.

Paso 2: Generar los archivos estáticos

Ejecuta el comando de build:

npm run build

Esto creará una carpeta out/ con todos los archivos estáticos listos para producción.

Paso 3: Crear cuenta en Cloudflare

Si aún no tienes cuenta, ve a cloudflare.com y créate una cuenta gratuita.

Paso 4: Acceder a Cloudflare Pages

Una vez en el dashboard de Cloudflare:

1. En la barra lateral izquierda, ve a Workers & Pages
2. Haz clic en el botón "Create application"
3. Selecciona la pestaña "Pages"

Paso 5: Elegir método de despliegue

Cloudflare te ofrece varias opciones:

Opción A: Conectar con Git (Recomendada)

Ventajas:

• Despliegues automáticos cuando haces push
• Vista previa de pull requests
• Historial de despliegues

Pasos:

1. Haz clic en "Connect to Git"
2. Selecciona GitHub o GitLab
3. Autoriza el acceso a Cloudflare
4. Selecciona tu repositorio
5. Configura el build:
   • Build command: npm run build
   • Build output directory: out
6. Haz clic en "Save and Deploy"

Opción B: Subir archivos estáticos manualmente

Ideal para:

• Pruebas rápidas
• Proyectos sin Git
• Despliegues ocasionales

Pasos:

1. Haz clic en "Upload assets"
2. Arrastra la carpeta out/ completa (o selecciónala)
3. Haz clic en "Deploy site"

Paso 6: Verificar el despliegue

Una vez completado el proceso:

1. Cloudflare te mostrará una URL temporal
2. Haz clic en la URL para verificar que tu sitio funciona correctamente
3. Deberías ver tu aplicación Next.js funcionando

Paso 7: Agregar dominio personalizado (Opcional)

Si tienes un dominio propio:

1. Selecciona tu proyecto en el dashboard
2. Ve a la pestaña "Custom domains"
3. Haz clic en "Set up a custom domain"
4. Escribe tu dominio (ej: midominio.com)
5. Cloudflare configurará automáticamente los registros DNS

Si tu dominio está en Cloudflare:

• La configuración es automática
• Los certificados SSL se activan instantáneamente

Si tu dominio está en otro proveedor:

• Cloudflare te mostrará los registros DNS que debes agregar
• Copia los registros CNAME en tu proveedor de dominio
• La propagación puede tardar hasta 24 horas

Comandos útiles

# Desarrollo local
npm run dev

# Generar build de producción
npm run build

# Vista previa local del build
npx serve out

Limitaciones importantes

Al usar output: 'export' en Next.js, no podrás usar:

• API Routes (/app/api/*)
• Server Actions
• Server Components con lógica dinámica
• ISR (Incremental Static Regeneration)
• Middleware que modifica respuestas

Sí puedes usar:

• Client Components
• Static Site Generation (SSG)
• Dynamic routes con generateStaticParams
• Imágenes optimizadas
• CSS Modules y Tailwind

Solución de problemas comunes

Error: "Page Not Found" en rutas dinámicas

Si tus rutas dinámicas no funcionan, asegúrate de generar todas las rutas estáticamente:

// app/blog/[slug]/page.tsx
export async function generateStaticParams() {
  const posts = await getPosts();

  return posts.map((post) => ({
    slug: post.slug,
  }));
}

Ventajas de Cloudflare Pages

• Gratis: 500 builds/mes
• SSL automático: Certificados HTTPS incluidos
• 1 build: 1 build a la vez
• Sitios ilimitados: Puedes crear todos los proyectos que necesites
• Requests ilimitadas: Sin límite de peticiones estáticas
• Ancho de banda ilimitado: Sin cargo por tráfico
• Rollbacks: Vuelve a versiones anteriores. Puedes desplegar o hacer rollback a las últimas 100 versiones guardadas
• Analytics: Estadísticas de visitas incluidas

Conclusión

Desplegar Next.js en Cloudflare Pages es rápido y sencillo. Como viste, tendrás tu sitio en producción en minutos. He trabajado en varios proyectos y he usado esta solución con excelentes resultados. También puedes usar Firebase Hosting o AWS S3, el procedimiento sería muy similar. Tal vez en otro post escriba sobre estas alternativas, pero ya te vas dando una idea de las opciones disponibles.

La combinación de Next.js con Cloudflare Pages te da una plataforma moderna, rápida y gratuita para tus proyectos web. Si tus páginas no dependen de funcionalidades del servidor, esta opción te ahorrará muchos costos y además tu sitio cargará muy rápido.