Resmi Entegrasyon & SDK
Next.js App Router ve Pages Router için sıfır gecikmeli görsel optimizasyonu
next/image bileşenlerini Vercel sunucusuz fonksiyonlarını zorlamadan optimize edin. Edge dönüşümlerinden ve ultra hızlı CDN önbelleklemesinden faydalanın.
Yükle:
TYPESCRIPT Paketinpm install @smallpict/nextUygulama Örneği
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;Entegrasyon Adımları
1Paketi Yükleyin
npm, pnpm veya yarn kullanarak @smallpict/nextjs paketini projenize ekleyin.
2next.config.js Dosyasını Düzenleyin
images.loaderFile ayarını SmallPict uç noktanızı gösterecek şekilde yapılandırın.
3Image Bileşenini Kullanın
Otomatik AVIF ve WebP format desteği sunan standart next/image bileşenini kullanın.
Önemli Avantajlar
- Vercel ve Netlify üzerindeki maliyetli sunucusuz limit aşımlarını engeller
- Anında AVIF ve WebP kodlama ile çalışma anında dönüşümler
- Otomatik bulanık LQIP yer tutucu görseller oluşturma
- App Router, Server Components ve statik oluşturma (SSG) ile tam uyumlu
Resmi Geliştirici Belgeleri
Eksiksiz uygulama kılavuzları ve API özelliklerine mi ihtiyacınız var?
Resmi Next.js Bileşeni ve Yükleyicisi geliştirici kılavuzumuzda parametre referanslarını, kimlik doğrulamayı ve yerel testleri inceleyin.
Next.js Bileşeni ve Yükleyicisi Görsel İşleme Sürecinizi Hızlandırın
Uygulamanızda 50 ms altı AVIF ve WebP optimizasyonunu deneyimleyin. Kurulum ücreti yok, anında sandbox anahtarları.
