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. wrap 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 உடன் திட்டம் தேவைப்படுகிறது.இலவசத்தில் உள்ள படம் 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 வகையைத் தேர்வுசெய்யவும் அல்லது பிழையறிந்து இலிருந்து தொடங்கவும்.உங்கள் தள ஐடி, பேக்கேஜ் பதிப்பு மற்றும் படத்தின் டெலிவரி அல்லது வார்மிங்கைப் பயன்படுத்துவதில் சிக்கல் உள்ளதா என்பதைச் சேர்க்கவும்.