SmallPict LogoSmallPict
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:npm install @smallpict/next
Paket TYPESCRIPT

Contoh 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.

Baca Dokumen 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.