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 എന്നിവ നിങ്ങളുടെ ഹോസ്റ്റിൽ തുടരും.

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-കൾ 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 ഉള്ള ഒരു പ്ലാൻ ആവശ്യമാണ്.Free-ലെ ഇമേജ് 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 വിഭാഗം തിരഞ്ഞെടുക്കുക, അല്ലെങ്കിൽ ട്രബിൾഷൂട്ടിംഗ് എന്നതിൽ നിന്ന് ആരംഭിക്കുക.നിങ്ങളുടെ സൈറ്റ് ഐഡി, പാക്കേജ് പതിപ്പ്, പ്രശ്നം ഇമേജ് ഡെലിവറി അല്ലെങ്കിൽ വിന്യസിക്കുക വാമിംഗ് എന്നിവ ഉൾപ്പെടുത്തുക.