Next.js

Next.js-এর জন্য Cache Rocket হল একটি ছবি CDN + ঐচ্ছিক `/_next/static` CDN + ক্যাশে ওয়ার্মিং প্যাকেজ যা আপনার বিদ্যমান হোস্টের পাশে বসে। আপনি SSR এবং এইচটিএমএল যেখানে আছে সেখানে রাখুন (ভার্সেল, নেটলিফাই, ক্লাউডফ্লেয়ার পেজ, বা আপনার নিজস্ব নোড হোস্ট)। Cache Rocket ইমেজ অপ্টিমাইজ করে এবং বিতরণ করে, পরিচালিত CDN থেকে হ্যাশড JS/CSS পরিবেশন করতে পারে এবং প্রতিটি স্থাপনের পরে ইউআরএল উষ্ণ করতে পারে।

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-এ পাথ-ভিত্তিক ট্রান্সফর্ম ইউআরএল-এর অনুরোধগুলি পুনর্লিখন করে:

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. স্থাপনে উষ্ণ#

একটি রুট হ্যান্ডলার যোগ করুন এবং এটিতে একটি Vercel ডিপ্লয় হুক (বা সমতুল্য ওয়েবহুক) নির্দেশ করুন:

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

এনপিএম প্যাকেজ ছাড়া প্ল্যাটফর্ম ওয়েবহুক ইউআরএলগুলি ডিপ্লয় ট্রিগারস এর মধ্যে রয়েছে।

প্যাকেজ রপ্তানি#

সাধারণ সমস্যা#

ছবিগুলি এখনও আমার হোস্টে /_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 থেকে শুরু করুন। আপনার সাইটের আইডি, প্যাকেজ সংস্করণ এবং সমস্যাটি ইমেজ ডেলিভারি বা উষ্ণতা নিয়োজিত কিনা তা অন্তর্ভুক্ত করুন।