Next.js

Cache Rocket pour Next.js est un package CDN d'image + CDN `/_next/static` en option + réchauffement du cache qui se trouve à côté de votre hôte existant.Vous conservez SSR et HTML là où ils se trouvent (Vercel, Netlify, Cloudflare Pages ou votre propre hôte Node).Cache Rocket optimise et fournit des images, peut servir du JS/CSS haché à partir d'un CDN géré et peut réchauffer les URL après chaque déploiement.

1. Créez un site Next.js#

Dans le tableau de bord, ouvrez Compte → Next.js , créez un site pour votre nom d'hôte et copiez le jeton de site, l'ID de site et les clés API.Ajoutez des entrées de liste d’autorisation d’hôtes d’images pour chaque origine à partir de laquelle vous chargez des images (le nom d’hôte de votre site est toujours inclus).

2. Installez le package#

@cacherocket/next est publié sur le registre public npm :

npm i @cacherocket/next

3. Variables d'environnement#

# 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. Enveloppez 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. Utilisez next/image comme d'habitude#

Préférez les URL d’images absolues ou les chemins relatifs lorsque CACHEROCKET_ASSET_ORIGIN est défini.Le chargeur réécrit les requêtes vers les URL de transformation basées sur le chemin sur img.cacherocket.com :

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

6. Facultatif : CDN d'actif statique ( `/_next/static` )#

Pour les applications Next.js auto-hébergées ou non Vercel (ou lorsque vous souhaitez que le JS/CSS haché soit retiré de votre origine), activez CDN d'actifs statiques sur Compte → Next.js .Cela nécessite ManagedCDN sur votre forfait.Cache Rocket stocke la sortie générée dans OVH sous votre chemin locataire et la diffuse depuis Bunny sur assets.cacherocket.com .HTML et SSR restent sur votre hôte.

Copiez staticCdnUrl dans CACHEROCKET_STATIC_CDN_URL (jamais dans le CACHEROCKET_CDN_URL interne de CacheRocket .com).Après chaque next build , téléchargez les éléments :

npx cacherocket-next upload-static

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

await uploadStatic()

7. Réchauffez-vous lors du déploiement#

Ajoutez un gestionnaire de route et pointez un Vercel Deploy Hook (ou un webhook équivalent) dessus :

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

export const POST = onVercelDeploy()

Ou appelez des assistants à partir d'un script ou d'une étape CI :

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

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

Les URL de webhook de plate-forme sans le package npm sont traitées dans Déclencheurs de déploiement.

Exportations de packages#

Problèmes courants#

Les images passent toujours par /_next/image sur mon hôte.

Confirmez que withCacheRocket encapsule votre configuration exportée et que CACHEROCKET_SITE_TOKEN est défini au moment de la construction.Redéployez après avoir modifié les variables d'environnement.

Je vois « Jeton de site inconnu ou inactif ».

Le jeton dans l'URL de l'image ne correspond pas à un site Next.js actif.Copiez le jeton de site actuel depuis Compte → Next.js et redéployez.

Les images distantes renvoient une erreur ou reviennent à l'URL d'origine.

Ajoutez le nom d'hôte de l'image à la liste verte du site.Seules les origines sur liste blanche peuvent être optimisées.Un échec logiciel vers l'URL d'origine se produit également lorsque vous dépassez le quota du plan.

Les images relatives /public ne parviennent pas à être optimisées.

Définissez CACHEROCKET_ASSET_ORIGIN (ou l'origine de votre site public) afin que Cache Rocket puisse résoudre une URL de récupération absolue.

La bascule CDN statique indique que mon forfait n'inclut pas le CDN géré.

La livraison statique /_next/static utilise un CDN géré ( assets.cacherocket.com ) et nécessite un plan avec allowCdn .Image CDN sur Free fonctionne toujours via img.cacherocket.com.

/_next/static 404 du CDN après le déploiement.

Activez le CDN statique sur le site, définissez CACHEROCKET_STATIC_CDN_URL , redéployez pour que assetPrefix soit appliqué, puis exécutez npx cacherocket-next upload-static après next build .

Le déploiement du réchauffement ne fonctionne jamais.

Confirmez que le webhook atteint votre itinéraire /api/cacherocket/deploy (ou le webhook de déploiement public), que les clés API du serveur uniquement et CACHEROCKET_SITE_ID sont définies et que le nom d'hôte correspond à un réchauffeur actif.Voir Déployer des déclencheurs.

Besoin d'aide ?#

Ouvrez Compte → Support et choisissez la catégorie Next.js, ou démarrez à partir de Dépannage.Incluez l'ID de votre site, la version du package et si le problème concerne la livraison d'images ou le réchauffement du déploiement.