SmallPict LogoSmallPict
Offizielle Integration & SDK

Latenzfreie Bildoptimierung für Next.js App Router und Pages Router

Optimieren Sie next/image-Komponenten, ohne Vercel Serverless Functions zu belasten. Profitieren Sie von Edge-Transformationen und blitzschnellem CDN-Caching.

Installieren:npm install @smallpict/next
TYPESCRIPT-Paket

Implementierungsbeispiel

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;

Integrationsschritte

1Loader installieren

Fügen Sie das Paket @smallpict/nextjs mit npm, pnpm oder yarn hinzu.

2next.config.js anpassen

Konfigurieren Sie images.loaderFile so, dass es auf Ihren SmallPict-Endpunkt verweist.

3Image-Komponente einsetzen

Nutzen Sie die gewohnte next/image-Komponente mit automatischer AVIF- und WebP-Auslieferung.

Hauptvorteile

  • Verhindert teure Überschreitungen von Serverless-Funktionslimits bei Vercel
  • On-the-fly-Transformationen mit AVIF- und WebP-Kodierung
  • Automatische Generierung von LQIP-Unschärfe-Platzhaltern
  • Kompatibel mit App Router, Server Components und statischer Generierung
Offizielle Entwicklerdokumentation

Benötigen Sie vollständige Leitfäden & API-Spezifikationen?

Entdecken Sie Parameterreferenzen, Authentifizierung und Tests in unserem offiziellen Next.js Komponente & Loader-Leitfaden.

Next.js Komponente & Loader-Dokumentation lesen

Optimieren Sie Ihre Next.js Komponente & Loader-Bild-Pipeline

Erleben Sie AVIF- und WebP-Bildoptimierung in unter 50 ms. Keine Einrichtungsgebühr, sofortige Sandbox-Schlüssel.