Next.js

Next.js માટે Cache Rocket એ ઇમેજ CDN + વૈકલ્પિક `/_next/static` CDN + કેશ વોર્મિંગ પેકેજ છે જે તમારા હાલના હોસ્ટની બાજુમાં બેસે છે. તમે SSR અને HTML જ્યાં છે ત્યાં રાખો (વર્સેલ, નેટલિફાઈ, ક્લાઉડફ્લેર પેજીસ અથવા તમારા પોતાના નોડ હોસ્ટ). 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. આગામી. રૂપરેખાને લપેટી#

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 માં staticCdnUrl કોપી કરો (ક્યારેય 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, પેકેજ વર્ઝન અને સમસ્યા ઇમેજ ડિલિવરીનો છે કે વોર્મિંગનો ઉપયોગ કરવાનો છે તે શામેલ કરો.