Marketing sites on Vercel
Optimize hero and CMS images while keeping App Router hosting on Vercel.
← Back to features
Feature
Next.js Image CDN
Route next/image through Cache Rocket, optionally CDN `/_next/static`, and warm URLs after every deploy.
Cache Rocket for Next.js sits beside your existing host. Keep SSR and HTML on Vercel, Netlify, Cloudflare Pages, or self-hosted Node. Install @cacherocket/next to send next/image through img.cacherocket.com—and optionally serve hashed /_next/static from Managed CDN—plus warm critical URLs when you ship.
Highlights
- Official @cacherocket/next package for next.config and next/image
- On-demand transforms delivered from img.cacherocket.com
- Optional /_next/static CDN via assets.cacherocket.com (Managed CDN plans)
- Soft-fail to the original image URL when over quota
- Deploy warming + post-build static upload helpers for CI
Image CDN without moving your host
withCacheRocket wraps your Next.js config and wires a custom image loader. Absolute image URLs—or relative /public paths when you set an asset origin—are rewritten to path-based transform URLs on img.cacherocket.com so the edge can cache each size and format reliably.
Hosting, SSR, and your existing Data Cache stay where they are. Cache Rocket optimizes and delivers images, can CDN hashed static assets, and can warm page URLs after deploy.
Static assets for non-Vercel hosts
Enable Static asset CDN on Account → Next.js to set Next.js assetPrefix to your tenant path on assets.cacherocket.com. After next build, run npx cacherocket-next upload-static so OVH + Bunny serve /_next/static worldwide.
This is separate from CacheRocket.com’s own site CDN config. Customer sites use CACHEROCKET_STATIC_CDN_URL from the dashboard.
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.
How it works
- 1
Create a Next.js site
In Account → Next.js, create a site, copy the site token and API keys, and set your image host allowlist.
- 2
Install @cacherocket/next
Add the package, wrap next.config with withCacheRocket, and set env vars on Vercel or locally.
- 3
Ship, upload static (optional), and warm
Use next/image as usual. Optionally enable static CDN and upload after build. Point a deploy webhook at onVercelDeploy() or your public warm webhook.
Where it shines
Self-hosted Next.js
CDN /_next/static via Managed CDN when you are not on Vercel’s edge network.
Teams with frequent deploys
Combine image CDN with post-deploy warming so releases never greet users with cold routes.
Frequently asked questions
- Is this the same as WordPress Managed CDN?
- Images use img.cacherocket.com via @cacherocket/next. Optional Next.js /_next/static and WordPress Managed CDN both use assets.cacherocket.com and share CDN bandwidth quotas.
- What happens when I exceed my transform or bandwidth quota?
- New Next.js transforms soft-fail with a redirect to the original image URL so pages keep working. Upgrade or wait for the next billing period for more quota.
- Does Free include Next.js?
- Yes for image CDN: Free includes a trial of 25 image transforms and 1 GB image CDN bandwidth per month. Static /_next/static CDN requires Managed CDN on a paid plan.
- Where is the setup guide?
- See Documentation → Next.js, or open Account → Next.js for site tokens and copy-paste snippets.
Related features
All featuresReady to try this in your account?
Create a free Cache Rocket account, verify a hostname, and turn this capability on for your site or API.