Integrasi & SDK Resmi
Optimasi Gambar Tanpa Biaya Tambahan untuk Next.js 14, 15 & 16
Hilangkan tagihan overage optimasi gambar yang mahal di Vercel. SmallPict bertindak sebagai custom loader berkinerja tinggi untuk next/image, menyediakan streaming AVIF/WebP, caching edge, dan placeholder blurhash.
Instal:
Paket TYPESCRIPTnpm install @smallpict/nextContoh Implementasi
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;Langkah Integrasi
11. Buat smallpict-loader.ts
Konfigurasikan fungsi loader ringan yang mengarah ke CDN SmallPict.
22. Daftarkan di next.config.ts
Atur images.loader = "custom" dan images.loaderFile di konfigurasi Next.js Anda.
33. Gunakan standar next/image
Gunakan Image seperti biasa.
Manfaat Utama
- Hindari biaya $10 per 1000 permintaan transformasi gambar di Vercel
- TTFB edge cache di bawah 50ms di seluruh dunia
- Pembuatan srcset responsif otomatis
- Dukungan penuh untuk Next.js App Router & Server Components
Dokumentasi Developer Resmi
Butuh Panduan Implementasi Lengkap & Spesifikasi API?
Pelajari referensi parameter, mekanisme autentikasi, kode error, dan instruksi pengujian lokal di panduan developer resmi Framework Next.js.
Tingkatkan Pipeline Gambar Framework Next.js Anda
Rasakan optimasi gambar AVIF dan WebP di bawah 50ms di aplikasi Anda. Tanpa biaya setup, sandbox API key instan, dan skalabilitas tanpa batas.
