Next.js

Cache Rocket voor Next.js is een image CDN + optioneel `/_next/static` CDN + cache-warming-pakket dat naast uw bestaande host wordt geplaatst.Je houdt SSR en HTML waar ze zijn (Vercel, Netlify, Cloudflare Pages of je eigen Node-host).Cache Rocket optimaliseert en levert images, kan gehashte JS/CSS van Managed CDN leveren en kan URL's opwarmen na elke implementatie.

1. Maak een Next.js-site#

Open in het dashboard Account → Next.js , maak een site voor uw hostnaam en kopieer de sitetoken, site-ID en API-sleutels.Voeg vermeldingen op de toelatingslijst van de afbeeldingshost toe voor elke oorsprong waarvan u afbeeldingen laadt (de hostnaam van uw site is altijd inbegrepen).

2. Installeer het pakket#

@cacherocket/next wordt gepubliceerd in het openbare npm-register:

npm i @cacherocket/next

3. Omgevingsvariabelen#

# Public — safe in the browser / image URLs
CACHEROCKET_SITE_TOKEN=site_xxx
# Absolute origin for relative /public images (optional but recommended)
CACHEROCKET_ASSET_ORIGIN=https://www.example.com

# Optional — customer static CDN (/_next/static) from Account → Next.js
# Do not use CacheRocket.com's internal CACHEROCKET_CDN_URL
CACHEROCKET_STATIC_CDN_URL=https://assets.cacherocket.com/org_…/site_…/static

# Server-only — warm / purge / deploy / static upload
CACHEROCKET_PUBLIC_KEY=...
CACHEROCKET_SECRET_KEY=...
CACHEROCKET_SITE_ID=...

4. Wikkel next.config#

import type { NextConfig } from 'next'
import { withCacheRocket } from '@cacherocket/next'

const nextConfig: NextConfig = {
  // your config
}

export default withCacheRocket(
  {
    siteToken: process.env.CACHEROCKET_SITE_TOKEN,
    assetOrigin: process.env.CACHEROCKET_ASSET_ORIGIN,
    staticCdnUrl: process.env.CACHEROCKET_STATIC_CDN_URL,
  },
  nextConfig
)

5. Gebruik volgende/afbeelding zoals gewoonlijk#

Geef de voorkeur aan absolute afbeeldings-URL's of relatieve paden wanneer CACHEROCKET_ASSET_ORIGIN is ingesteld.De lader herschrijft verzoeken naar op paden gebaseerde transformatie-URL's op img.cacherocket.com:

https://img.cacherocket.com/i/site_xxx/w_1200,q_75,f_auto/https%3A%2F%2F...

6. Optioneel: statische asset CDN (`/_next/static`)#

Voor zelfgehoste of niet-Vercel Next.js-apps (of als u JS/CSS van uw bron wilt hashen), schakelt u Statische asset CDN in op Account → Next.js .Hiervoor is Managed CDN vereist in uw abonnement.Cache Rocket slaat build-uitvoer op in OVH onder uw tenantpad en levert deze vanuit Bunny op assets.cacherocket.com.HTML en SSR blijven op uw host.

Kopieer staticCdnUrl naar CACHEROCKET_STATIC_CDN_URL (nooit de interne CACHEROCKET_CDN_URL van CacheRocket .com).Upload na elke next build assets:

npx cacherocket-next upload-static

import { uploadStatic } from '@cacherocket/next/server'

await uploadStatic()

7. Warm bij inzet#

Voeg een Route Handler toe en richt er een Vercel Deploy Hook (of gelijkwaardige webhook) op:

import { onVercelDeploy } from '@cacherocket/next/server'

export const POST = onVercelDeploy()

Of bel helpers vanuit een script of CI-stap:

import { warm, purge } from '@cacherocket/next/server'

await warm({ urls: ['https://www.example.com/'] })
await purge({ rewarm: true })

Platformwebhook-URL's zonder het npm-pakket worden behandeld in Triggers implementeren.

Pakketexport#

Veelvoorkomende problemen#

Afbeeldingen gaan nog steeds via /_next/image op mijn host.

Bevestig dat withCacheRocket uw geëxporteerde configuratie omhult en dat CACHEROCKET_SITE_TOKEN is ingesteld tijdens het bouwen.Opnieuw implementeren na het wijzigen van de omgevingsvariabelen.

Ik zie 'Onbekende of inactieve sitetoken'.

Het token in de afbeeldings-URL komt niet overeen met een actieve Next.js-site.Kopieer het huidige sitetoken van Account → Next.js en implementeer opnieuw.

Afbeeldingen op afstand retourneren een fout of vallen terug op de oorspronkelijke URL.

Voeg de hostnaam van de afbeelding toe aan de toelatingslijst van de site.Alleen oorsprongen die op de toelatingslijst staan, kunnen worden geoptimaliseerd.Soft-fail naar de oorspronkelijke URL gebeurt ook als u het planquotum overschrijdt.

Relatieve /public-afbeeldingen kunnen niet worden geoptimaliseerd.

Stel CACHEROCKET_ASSET_ORIGIN (of de oorsprong van uw openbare site) zo in dat Cache Rocket een absolute ophaal-URL kan omzetten.

De statische CDN-schakelaar geeft aan dat mijn abonnement geen Managed CDN omvat.

Statische /_next/static-levering maakt gebruik van Managed CDN (assets.cacherocket.com) en vereist een abonnement met allowCdn.Image CDN op Free werkt nog steeds via img.cacherocket.com.

/_next/static 404's van het CDN na implementatie.

Schakel statische CDN in op de site, stel CACHEROCKET_STATIC_CDN_URL in, implementeer opnieuw zodat assetPrefix wordt toegepast en voer vervolgens npx cacherocket-next upload-static uit na next build.

Het inzetten van opwarming loopt nooit.

Bevestig dat de webhook uw /api/cacherocket/deploy-route raakt (of de openbare webhook), dat API-sleutels voor alleen de server en CACHEROCKET_SITE_ID zijn ingesteld en dat de hostnaam overeenkomt met een actieve warmer.Zie Triggers implementeren.

Hulp nodig?#

Open Account → Ondersteuning en kies de categorie Next.js, of begin met Probleemoplossing.Vermeld uw site-ID, pakketversie en of het probleem te maken heeft met het leveren van afbeeldingen of het implementeren van opwarming.