Next.js

Next.js के लिए Cache Rocket एक छवि CDN + वैकल्पिक `/_next/static` CDN + कैश वार्मिंग पैकेज है जो आपके मौजूदा होस्ट के पास बैठता है।आप एसएसआर और एचटीएमएल को वहीं रखते हैं जहां वे हैं (वर्सेल, नेटलिफाई, क्लाउडफ्लेयर पेज, या अपना खुद का नोड होस्ट)।Cache Rocket छवियों को अनुकूलित और वितरित करता है, प्रबंधित सीडीएन से हैशेड जेएस/सीएसएस की सेवा कर सकता है, और प्रत्येक तैनाती के बाद यूआरएल को गर्म कर सकता है।

1. एक Next.js साइट बनाएं#

डैशबोर्ड में खाता → Next.js खोलें, अपने होस्टनाम के लिए एक साइट बनाएं, और साइट टोकन, साइट आईडी, और एपीआई कुंजियाँ कॉपी करें।आप जिस भी स्रोत से छवियाँ लोड करते हैं, उसके लिए छवि होस्ट अनुमति सूची प्रविष्टियाँ जोड़ें (आपकी साइट का होस्टनाम हमेशा शामिल होता है)।

2. पैकेज स्थापित करें#

@cacherocket/next सार्वजनिक एनपीएम रजिस्ट्री पर प्रकाशित हुआ है:

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 सक्षम करें।इसके लिए आपकी योजना पर प्रबंधित सीडीएन की आवश्यकता है।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()

या किसी स्क्रिप्ट या सीआई चरण से सहायकों को कॉल करें:

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

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

एनपीएम पैकेज के बिना प्लेटफ़ॉर्म वेबहुक यूआरएल [डिप्लॉय ट्रिगर्स] (/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 को हल कर सके।

स्टेटिक सीडीएन टॉगल कहता है कि मेरी योजना में प्रबंधित सीडीएन शामिल नहीं है।

स्टेटिक /_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 रूट (या सार्वजनिक परिनियोजन वेबहुक) को हिट करता है, कि सर्वर-केवल एपीआई कुंजी और CACHEROCKET_SITE_ID सेट हैं, और होस्टनाम एक सक्रिय वार्मर से मेल खाता है।ट्रिगर तैनात करें देखें।

मदद की ज़रूरत है?#

खाता → समर्थन खोलें और Next.js श्रेणी चुनें, या [समस्या निवारण] (/documentation/troubleshooting) से शुरू करें।अपनी साइट आईडी, पैकेज संस्करण और क्या समस्या छवि वितरण या परिनियोजन वार्मिंग है, शामिल करें।