Sites marketing sur Vercel
Optimisez les images Hero et CMS tout en conservant l'hébergement d'App Router sur Vercel.
← Retour aux fonctionnalités
Fonctionnalité
Next.js Image CDN
Acheminez next/image via Cache Rocket , éventuellement CDN `/_next/static` , et réchauffez les URL après chaque déploiement.
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.
Points clés
- Package officiel @cacherocket/next pour next.config et next/image
- Transformations à la demande fournies depuis 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
Image CDN sans déplacer votre hôte
avec CacheRocket enveloppe votre configuration Next.js et câble un chargeur d'image personnalisé. Les images absolues URL (ou les chemins relatifs/publics lorsque vous définissez l'origine d'un actif) sont réécrites en transformations basées sur le chemin URL sur img.cacherocket.com afin que Edge puisse mettre en cache chaque taille et format de manière fiable.
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.
Chaud dans le cadre de l'expédition
Déploie les caches wipe Edge et framework. Utilisez onVercelDeploy() dans un gestionnaire de route, ou appelez warm et purge depuis CI, afin que le premier vrai visiteur après une version ne paie pas le coût de démarrage à froid.
Les mêmes compteurs d'option d'image et de bande passante CDN alimentent le WordPress Managed CDN lorsque vous utilisez les deux, de sorte que les quotas du plan restent prévisibles au même endroit.
Comment ça marche
- 1
Créer un site Next.js
Dans Account → Next.js , créez un site, copiez le jeton de site et les clés API, et définissez la liste autorisée de votre hôte d'image.
- 2
Installez @cacherocket/suivant
Ajoutez le package, enveloppez next.config avec CacheRocket et définissez les variables d'environnement sur Vercel ou localement.
- 3
Ship and warm
Use next/image as usual, then point a deploy webhook at onVercelDeploy() or your public warm webhook.
Là où ça excelle
Headless storefronts
Allowlist Shopify or CMS image hosts and serve resized WebP/AVIF from Cache Rocket.
Équipes avec des déploiements fréquents
Combinez l'image CDN avec le réchauffement post-déploiement afin que les versions n'accueillent jamais les utilisateurs avec des routes froides.
Questions fréquentes
- Est-ce la même chose que WordPress CDN géré ?
- 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.
- Que se passe-t-il lorsque je dépasse mon quota de transformation ou de bande passante ?
- Le nouveau Next.js transforme l'échec logiciel avec une redirection vers l'image d'origine URL afin que les pages continuent de fonctionner. Mettez à niveau ou attendez la prochaine période de facturation pour obtenir plus de quota.
- La version gratuite inclut-elle 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.
- Où est le guide de configuration ?
- Voir Documentation → Next.js , ou ouvrez Account → Next.js pour les jetons de site et les extraits de code copier-coller.
Fonctionnalités associées
Toutes les fonctionnalitésPrêt à essayer sur votre compte ?
Créez un compte Cache Rocket gratuit, vérifiez un nom d'hôte, et activez cette fonctionnalité pour votre site ou votre API.