Next.js

Cache Rocket для Next.js — это пакет CDN изображений + дополнительный `/_next/static` CDN + разогрев кэша, который находится рядом с вашим существующим хостом.Вы сохраняете SSR и HTML там, где они есть (Vercel, Netlify, Cloudflare Pages или ваш собственный узел Node).Cache Rocket оптимизирует и доставляет изображения, может предоставлять хешированные JS/CSS из управляемой CDN и может нагревать URL-адреса после каждого развертывания.

1. Создайте сайт Next.js.#

На панели управления откройте Учетная запись → Next.js , создайте сайт для своего имени хоста и скопируйте токен сайта, идентификатор сайта и ключи API.Добавьте записи в белый список хостов изображений для каждого источника, из которого вы загружаете изображения (имя хоста вашего сайта всегда включается).

2. Установите пакет#

@cacherocket/next публикуется в общедоступном реестре npm:

npm i @cacherocket/next

3. Переменные среды#

# 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. Оберните 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. Используйте next/image как обычно#

Предпочитайте абсолютные URL-адреса изображений или относительные пути, если установлен CACHEROCKET_ASSET_ORIGIN.Загрузчик переписывает запросы на URL-адреса преобразования на основе пути на img.cacherocket.com:

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

6. Необязательно: CDN статического актива ( `/_next/static` ).#

Для самостоятельных приложений Next.js или приложений, не принадлежащих Vercel (или если вы хотите, чтобы хешированный JS/CSS был удален от вашего источника), включите CDN статических активов в Учетная запись → Next.js .Для этого в вашем плане требуется Управляемый CDN.Cache Rocket сохраняет выходные данные сборки в OVH по вашему пути клиента и передает их из Bunny на assets.cacherocket.com .HTML и SSR остаются на вашем хосте.

Скопируйте staticCdnUrl в CACHEROCKET_STATIC_CDN_URL (никогда не во внутренний CACHEROCKET_CDN_URL CacheRocket .com).После каждого next build загружайте ресурсы:

npx cacherocket-next upload-static

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

await uploadStatic()

7. Прогрев при развертывании#

Добавьте обработчик маршрута и укажите на него Vercel Deploy Hook (или эквивалентный веб-хук):

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

export const POST = onVercelDeploy()

Или вызовите помощников из сценария или шага CI:

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

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

URL-адреса веб-перехватчиков платформы без пакета npm описаны в разделе [Триггеры развертывания] ( /documentation/deploy-triggers ).

Экспорт пакетов#

Распространенные проблемы#

Изображения по-прежнему проходят через /_next/image на моем хосте.

Убедитесь, что withCacheRocket обертывает вашу экспортированную конфигурацию и что CACHEROCKET_SITE_TOKEN установлен во время сборки.Повторное развертывание после изменения переменных окружения.

Я вижу «Неизвестный или неактивный токен сайта».

Токен в URL-адресе изображения не соответствует активному сайту Next.js.Скопируйте текущий токен сайта из Учетная запись → Next.js и повторно разверните.

Удаленные изображения возвращают ошибку или возвращаются к исходному URL-адресу.

Добавьте имя хоста изображения в список разрешенных сайтов.Оптимизировать можно только источники из белого списка.Мягкий сбой исходного URL-адреса также происходит, когда вы превышаете плановую квоту.

Относительные изображения /public не оптимизируются.

Установите CACHEROCKET_ASSET_ORIGIN (или источник общедоступного сайта), чтобы Cache Rocket мог разрешить URL-адрес абсолютной выборки.

Статический переключатель CDN говорит, что мой план не включает управляемый CDN.

Статическая доставка /_next/static использует управляемую CDN (assets.cacherocket.com) и требует плана с allowCdn.Image CDN в бесплатной версии по-прежнему работает через img.cacherocket.com.

/_next/static 404 из CDN после развертывания.

Включите статический CDN на сайте, установите CACHEROCKET_STATIC_CDN_URL , выполните повторное развертывание, чтобы применить assetPrefix, затем запустите npx cacherocket-next upload-static после next build .

Развертывание потепления никогда не запускается.

Убедитесь, что веб-перехватчик соответствует вашему маршруту /api/cacherocket/deploy (или общедоступному веб-перехватчику развертывания), что установлены ключи API только для сервера и CACHEROCKET_SITE_ID, а также что имя хоста соответствует активному идентификатору.См. [Развертывание триггеров] ( /documentation/deploy-triggers ).

Нужна помощь?#

Откройте Аккаунт → Поддержка и выберите категорию Next.js или начните с пункта [Устранение неполадок] ( /documentation/troubleshooting ).Укажите идентификатор вашего сайта, версию пакета и укажите, связана ли проблема с доставкой образа или потеплением развертывания.