Sitios de marketing en Vercel
Optimice las imágenes hero y CMS mientras mantiene el alojamiento de App Router en Vercel.
← Volver a funciones
Función
Imagen Next.js CDN
Enrute la siguiente imagen a través de Cache Rocket, opcionalmente CDN `/_next/static` y caliente los URL después de cada implementación.
Cache Rocket for Next.js sits beside your existing host. Keep SSR and HTML on Vercel, Netlify, or Cloudflare Pages. Install @cacherocket/next to send next/image through img.cacherocket.com with automatic width, quality, and format transforms—and warm critical URLs when you ship.
Lo más destacado
- Paquete oficial @cacherocket/next para next.config y next/image
- Transformaciones bajo demanda entregadas desde img.cacherocket.com
- Soft-fail to the original image URL when over quota
- Deploy warming helpers for Vercel hooks and CI
- Free trial included — larger shared quotas on paid plans
Imagen CDN sin mover tu host
with CacheRocket envuelve su configuración Next.js y conecta un cargador de imágenes personalizado. Las imágenes absolutas URL, o rutas relativas/públicas cuando se establece un origen de activo, se reescriben en transformaciones basadas en rutas URL en img.cacherocket.com para que Edge pueda almacenar en caché cada tamaño y formato de manera confiable.
Hosting, SSR, and your existing Data Cache stay where they are. Cache Rocket only optimizes and delivers images, and can warm page URLs after deploy.
Warm as part of shipping
Deploys wipe edge and framework caches. Use onVercelDeploy() in a Route Handler, or call warm and purge from CI, so the first real visitor after a release does not pay the cold-start cost.
The same image-opt and CDN bandwidth meters power WordPress Managed CDN when you use both—so plan quotas stay predictable in one place.
Cálido como parte del envío.
Implementa borrado de cachés de borde y marco. Utilice onVercelDeploy() en un controlador de ruta, o llame a Warm y purgue desde CI, de modo que el primer visitante real después de un lanzamiento no pague el costo de inicio en frío.
Los mismos medidores de ancho de banda de opción de imagen y CDN alimentan WordPress Managed CDN cuando usa ambos, para que las cuotas del plan sigan siendo predecibles en un solo lugar.
Cómo funciona
- 1
Crear un sitio Next.js
En Account → Next.js, cree un sitio, copie el token del sitio y las claves API y configure su lista de hosts de imágenes permitidos.
- 2
Instalar @cacherocket/siguiente
Agregue el paquete, ajuste next.config con CacheRocket y configure env vars en Vercel o localmente.
- 3
Ship and warm
Use next/image as usual, then point a deploy webhook at onVercelDeploy() or your public warm webhook.
Dónde brilla
Headless storefronts
Allowlist Shopify or CMS image hosts and serve resized WebP/AVIF from Cache Rocket.
Equipos con implementaciones frecuentes
Combine la imagen CDN con el calentamiento posterior a la implementación para que los lanzamientos nunca reciban a los usuarios con rutas frías.
Preguntas frecuentes
- ¿Es lo mismo que WordPress Managed CDN?
- No. Next.js uses img.cacherocket.com via @cacherocket/next. WordPress Managed CDN uses assets.cacherocket.com through the plugin. Both share monthly image-opt and CDN bandwidth quotas.
- ¿Qué sucede cuando excedo mi cuota de transformación o ancho de banda?
- El nuevo Next.js transforma el error suave con una redirección a la imagen original URL para que las páginas sigan funcionando. Actualice o espere el próximo período de facturación para obtener más cuota.
- ¿Gratis incluye Next.js?
- Yes. Free includes a trial of 25 image transforms and 1 GB image CDN bandwidth per month. Paid plans include larger shared allowances.
- ¿Dónde está la guía de configuración?
- Consulte Documentación → Next.js o abra Account → Next.js para obtener tokens del sitio y fragmentos de copiar y pegar.
Funciones relacionadas
Todas las funciones¿Listo para probarlo en tu cuenta?
Crea una cuenta gratuita de Cache Rocket, verifica un hostname y activa esta función para tu web o tu API.