आधिकारिक इंटीग्रेशन और SDK
Next.js 14, 15 और 16 के लिए शून्य अतिरिक्त लागत पर छवि अनुकूलन
Vercel के अत्यधिक छवि अनुकूलन शुल्कों को समाप्त करें। SmallPict next/image के लिए एक उच्च-प्रदर्शन कस्टम लोडर के रूप में कार्य करता है।
इंस्टॉल:
TYPESCRIPT पैकेजnpm install @smallpict/nextकार्यान्वयन उदाहरण
typescript// smallpict-loader.ts
export default function smallPictLoader({ src, width, quality }: { src: string; width: number; quality?: number }) {
const params = new URLSearchParams({
url: src,
w: width.toString(),
q: (quality || 80).toString(),
f: 'auto'
});
return `https://cdn.smallpict.app/v1/optimize?${params.toString()}`;
}
// next.config.ts
import type { NextConfig } from 'next';
const nextConfig: NextConfig = {
images: {
loader: 'custom',
loaderFile: './smallpict-loader.ts',
},
};
export default nextConfig;इंटीग्रेशन चरण
11. smallpict-loader.ts बनाएं
SmallPict CDN की ओर इशारा करते हुए हल्का लोडर फ़ंक्शन कॉन्फ़िगर करें।
22. next.config.ts में पंजीकृत करें
अपने Next.js कॉन्फ़िगरेशन में images.loader = 'custom' और loaderFile सेट करें।
33. मानक next/image का उपयोग करें
Image का सामान्य रूप से उपयोग करें।
मुख्य लाभ
- Vercel के प्रति 1000 अनुरोधों पर लगने वाले $10 के शुल्क से बचें
- दुनिया भर में 50ms से कम TTFB एज कैश प्रतिक्रिया
- स्वचालित उत्तरदायी srcset निर्माण
- Next.js App Router और सर्वर घटकों का पूर्ण समर्थन
आधिकारिक डेवलपर दस्तावेज़
क्या आपको पूर्ण गाइड और API विनिर्देश चाहिए?
हमारे आधिकारिक Next.js फ्रेमवर्क डेवलपर गाइड में पैरामीटर संदर्भ, प्रमाणीकरण और स्थानीय परीक्षण निर्देश देखें।
अपने Next.js फ्रेमवर्क इमेज पाइपलाइन को सुपरचार्ज करें
अपने ऐप में 50ms से कम में AVIF और WebP इमेज ऑप्टिमाइज़ेशन का अनुभव करें। कोई सेटअप शुल्क नहीं, तुरंत सैंडबॉक्स कीज़।
