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 ад вашага паходжання), уключыце CDN статычнага актыву на Уліковы запіс → Next.js.Для гэтага ў вашым плане патрабуецца Кіраваны CDN.Cache Rocket захоўвае выхад зборкі ў OVH пад вашым шляхам арандатара і абслугоўвае яго ад Bunny на assets.cacherocket.com.HTML і SSR застаюцца на вашым хасце.

Скапіруйце staticCdnUrl у CACHEROCKET_STATIC_CDN_URL (ніколі не CacheRocket унутраны CACHEROCKET_CDN_URL .com).Пасля кожнага 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 выбаркі.

Пераключальнік статычнага 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.

Разгортванне разагрэву ніколі не запускаецца.

Пацвердзіце, што вэбхук трапляе на ваш маршрут /api/cacherocket/deploy (або агульнадаступны вэбхук разгортвання), што ключы API толькі для сервера і CACHEROCKET_SITE_ID усталяваны, і што імя хаста супадае з актыўным грэльнікам.Глядзіце Разгарнуць трыгеры.

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

Адкрыйце Уліковы запіс → Падтрымка і абярыце катэгорыю Next.js або пачніце з Ліквідацыя непаладак.Уключыце ідэнтыфікатар вашага сайта, версію пакета і тое, ці звязана праблема з дастаўкай выявы або разгортваннем пацяплення.