Next.js

Next.js साठी Cache Rocket हे इमेज CDN + पर्यायी `/_next/static` CDN + कॅशे वार्मिंग पॅकेज आहे जे तुमच्या विद्यमान होस्टच्या बाजूला बसते. तुम्ही SSR आणि HTML जिथे आहेत तिथेच ठेवा (Vercel, Netlify, Cloudflare पेजेस किंवा तुमचे स्वतःचे नोड होस्ट). Cache Rocket प्रतिमा ऑप्टिमाइझ करते आणि वितरित करते, व्यवस्थापित CDN वरून हॅश केलेले JS/CSS सर्व्ह करू शकते आणि प्रत्येक उपयोजनानंतर 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. नेहमीप्रमाणे पुढील/प्रतिमा वापरा#

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 तुमच्या होस्टवर राहतात.

CACHEROCKET_STATIC_CDN_URL मध्ये 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 श्रेणी निवडा किंवा Troubleshooting पासून सुरुवात करा. तुमचा साइट आयडी, पॅकेज आवृत्ती आणि समस्या इमेज डिलिव्हरीची आहे की वार्मिंग उपयोजित करा.