Next.js

Cache Rocket Next.js అనేది మీ ప్రస్తుత హోస్ట్ పక్కన ఉండే చిత్రం CDN + ఐచ్ఛికం `/_next/static` CDN + కాష్ వార్మింగ్ ప్యాకేజీ. మీరు SSR మరియు HTML (Vercel, Netlify, Cloudflare పేజీలు లేదా మీ స్వంత నోడ్ హోస్ట్) ఉన్న చోట ఉంచుతారు. Cache Rocket ఇమేజ్‌లను ఆప్టిమైజ్ చేస్తుంది మరియు డెలివరీ చేస్తుంది, నిర్వహించబడే CDN నుండి హ్యాష్ చేసిన JS/CSSని అందించవచ్చు మరియు ప్రతి డిప్లాయ్ తర్వాత URLలను వార్మ్ చేయగలదు.

1. Next.js సైట్‌ని సృష్టించండి#

డాష్‌బోర్డ్‌లో ఖాతా → Next.js తెరవండి, మీ హోస్ట్ పేరు కోసం ఒక సైట్‌ను సృష్టించండి మరియు సైట్ టోకెన్, సైట్ ID మరియు 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. ఎప్పటిలాగే తదుపరి/చిత్రాన్ని ఉపయోగించండి#

CACHEROCKET_ASSET_ORIGIN సెట్ చేయబడినప్పుడు సంపూర్ణ చిత్ర URLలు లేదా సంబంధిత మార్గాలకు ప్రాధాన్యత ఇవ్వండి. లోడర్ img.cacherocket.comలో పాత్-బేస్డ్ ట్రాన్స్‌ఫార్మ్ URLలకు అభ్యర్థనలను తిరిగి వ్రాస్తుంది:

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

6. ఐచ్ఛికం: స్టాటిక్ అసెట్ CDN (`/_next/static`)#

స్వీయ-హోస్ట్ చేసిన లేదా నాన్-వర్సెల్ Next.js యాప్‌ల కోసం (లేదా మీరు మీ మూలం నుండి JS/CSSని హ్యాష్ చేయాలనుకున్నప్పుడు), ఖాతా → Next.jsలో స్టాటిక్ అసెట్ CDNని ప్రారంభించండి. దీనికి మీ ప్లాన్‌లో నిర్వహించబడిన CDN అవసరం. Cache Rocket స్టోర్‌లు మీ అద్దెదారు మార్గంలో OVHలో అవుట్‌పుట్‌ను నిర్మిస్తాయి మరియు 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. విస్తరణలో వెచ్చగా#

రూట్ హ్యాండ్లర్‌ను జోడించి, దాని వద్ద వెర్సెల్ డిప్లాయ్ హుక్ (లేదా సమానమైన వెబ్‌హుక్)ని సూచించండి:

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 })

npm ప్యాకేజీ లేని ప్లాట్‌ఫారమ్ వెబ్‌హూక్ URLలు డిప్లాయ్ ట్రిగ్గర్‌లులో కవర్ చేయబడ్డాయి.

ప్యాకేజీ ఎగుమతులు#

సాధారణ సమస్యలు#

చిత్రాలు ఇప్పటికీ నా హోస్ట్‌లో /_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తో ప్లాన్ అవసరం. ఉచిత చిత్రం CDN ఇప్పటికీ img.cacherocket.com ద్వారా పని చేస్తుంది.

విస్తరించిన తర్వాత CDN నుండి /_next/static 404s.

సైట్‌లో స్టాటిక్ CDNని ప్రారంభించండి, CACHEROCKET_STATIC_CDN_URLని సెట్ చేయండి, మళ్లీ అమర్చండి, తద్వారా assetPrefix వర్తించబడుతుంది, ఆపై next build తర్వాత npx cacherocket-next upload-staticని అమలు చేయండి.

వార్మింగ్‌ని అమలు చేయవద్దు.

వెబ్‌హూక్ మీ /api/cacherocket/deploy మార్గాన్ని (లేదా పబ్లిక్ డిప్లాయ్ వెబ్‌హూక్) తాకినట్లు నిర్ధారించండి, సర్వర్-మాత్రమే API కీలు మరియు CACHEROCKET_SITE_ID సెట్ చేయబడ్డాయి మరియు హోస్ట్ పేరు యాక్టివ్ వార్మర్‌తో సరిపోలుతుందని నిర్ధారించండి. డిప్లాయ్ ట్రిగ్గర్‌లు చూడండి.

సహాయం కావాలా?#

ఖాతా → సపోర్ట్ని తెరిచి, Next.js వర్గాన్ని ఎంచుకోండి లేదా ట్రబుల్‌షూటింగ్ నుండి ప్రారంభించండి. మీ సైట్ ID, ప్యాకేజీ సంస్కరణ మరియు సమస్య చిత్రం డెలివరీ లేదా వార్మింగ్‌ని అమలు చేయడం వంటివి చేర్చండి.