Next.js

Cache Rocket для Next.js — це пакет CDN із зображенням + необов’язковий CDN `/_next/static` + підігрів кешу, який розташовується поруч із наявним хостом.Ви зберігаєте 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. Використовуйте далі/зображення як зазвичай#

Надавати перевагу абсолютним 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 вийшов із вашого джерела), увімкніть Static asset CDN в Обліковий запис → Next.js .Для цього у вашому плані потрібен керований CDN.Cache Rocket зберігає вихід збірки в OVH під вашим шляхом клієнта та обслуговує його від Bunny на assets.cacherocket.com.HTML і SSR залишаються на вашому хості.

Копіюйте staticCdnUrl у CACHEROCKET_STATIC_CDN_URL (ніколи не CacheRocket .com внутрішній CACHEROCKET_CDN_URL).Після кожного next build завантажуйте ресурси:

npx cacherocket-next upload-static

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

await uploadStatic()

7. Тепло при розгортанні#

Додайте обробник маршруту та наведіть на нього хук Vercel Deploy (або еквівалентний вебхук):

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 встановлено під час створення.Повторне розгортання після зміни env vars.

Я бачу «Невідомий або неактивний маркер сайту».

Маркер в URL-адресі зображення не відповідає активному сайту Next.js.Скопіюйте поточний маркер сайту з Обліковий запис → Next.js і повторно розгорніть.

Віддалені зображення повертають помилку або повертаються до початкової URL-адреси.

Додайте ім’я хосту зображення до білого списку сайту.Оптимізувати можна лише джерела з білого списку.М'яка помилка вихідної URL-адреси також відбувається, коли ви перевищили квоту плану.

Не вдається оптимізувати відносні зображення /public.

Встановіть CACHEROCKET_ASSET_ORIGIN (або джерело загальнодоступного сайту), щоб Cache Rocket міг розпізнати абсолютну URL-адресу отримання.

Перемикач Static CDN повідомляє, що мій план не включає керований CDN.

Статична доставка /_next/static використовує керований CDN ( assets.cacherocket.com ) і вимагає плану з allowCdn .Image CDN на Free все ще працює через img.cacherocket.com.

/_next/static 404 з CDN після розгортання.

Увімкніть статичний CDN на сайті, установіть CACHEROCKET_STATIC_CDN_URL, повторно розгорніть, щоб застосувати assetPrefix, а потім запустіть npx cacherocket-next upload-static після next build.

Deploy heat ніколи не запускається.

Переконайтеся, що вебхук потрапляє на ваш маршрут /api/cacherocket/deploy (або загальнодоступний вебхук розгортання), що налаштовано ключі API лише для сервера та CACHEROCKET_SITE_ID, а ім’я хосту відповідає активному обігрівачу.Див. [Розгортання тригерів] (/documentation/deploy-triggers).

Потрібна допомога?#

Відкрийте Обліковий запис → Підтримка та виберіть категорію Next.js або почніть із Усунення несправностей.Укажіть ідентифікатор свого сайту, версію пакета та інформацію про те, чи проблема пов’язана з доставкою зображення чи розгортанням утеплення.