Next.js

Cache Rocket ಗಾಗಿ Next.js ಇಮೇಜ್ CDN + ಐಚ್ಛಿಕ `/_next/static` CDN + ಕ್ಯಾಶ್ ವಾರ್ಮಿಂಗ್ ಪ್ಯಾಕೇಜ್ ನಿಮ್ಮ ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಹೋಸ್ಟ್ ಪಕ್ಕದಲ್ಲಿದೆ. ನೀವು ಎಸ್‌ಎಸ್‌ಆರ್ ಮತ್ತು ಎಚ್‌ಟಿಎಮ್‌ಎಲ್ ಅನ್ನು ಎಲ್ಲಿಯೇ ಇರಿಸುತ್ತೀರಿ (ವರ್ಸೆಲ್, ನೆಟ್‌ಲಿಫೈ, ಕ್ಲೌಡ್‌ಫ್ಲೇರ್ ಪುಟಗಳು ಅಥವಾ ನಿಮ್ಮ ಸ್ವಂತ ನೋಡ್ ಹೋಸ್ಟ್). 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. ಸುತ್ತು 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 ಗಳನ್ನು ಡಿಪ್ಲೋಯ್ ಟ್ರಿಗ್ಗರ್‌ಗಳು ನಲ್ಲಿ ಒಳಗೊಂಡಿದೆ.

ಪ್ಯಾಕೇಜ್ ರಫ್ತು#

ಸಾಮಾನ್ಯ ಸಮಸ್ಯೆಗಳು#

ನನ್ನ ಹೋಸ್ಟ್‌ನಲ್ಲಿ ಚಿತ್ರಗಳು ಈಗಲೂ /_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 ವರ್ಗವನ್ನು ಆಯ್ಕೆಮಾಡಿ, ಅಥವಾ ಸಮಸ್ಯೆ ನಿವಾರಣೆ ನಿಂದ ಪ್ರಾರಂಭಿಸಿ. ನಿಮ್ಮ ಸೈಟ್ ಐಡಿ, ಪ್ಯಾಕೇಜ್ ಆವೃತ್ತಿ ಮತ್ತು ಸಮಸ್ಯೆಯು ಇಮೇಜ್ ಡೆಲಿವರಿ ಅಥವಾ ವಾರ್ಮಿಂಗ್ ಅನ್ನು ನಿಯೋಜಿಸಿ ಎಂಬುದನ್ನು ಸೇರಿಸಿ.