SmallPict LogoSmallPict
Officiƫle Integratie & SDK

Beeldoptimalisatie zonder wachttijd voor Next.js App Router en Pages Router

Optimaliseer next/image-componenten zonder Vercel serverless-functies te belasten. Maak gebruik van transformaties aan de Edge en supersnelle CDN-caching.

Installeren:npm install @smallpict/next
TYPESCRIPT Pakket

Implementatievoorbeeld

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;

Integratiestappen

1Installeer de Loader

Voeg het pakket @smallpict/nextjs toe via npm, pnpm of yarn.

2Pas next.config.js aan

Stel images.loaderFile in met verwijzing naar uw SmallPict-eindpunt.

3Gebruik het Image-component

Importeer het vertrouwde next/image-component met automatische levering van AVIF en WebP.

Belangrijkste Voordelen

  • Voorkomt onnodige kosten voor serverless functions bij Vercel en Netlify
  • On-the-fly transformaties met automatische AVIF- en WebP-codering
  • Automatische generatie van vage LQIP-plaatsaanduidingen
  • Volledig compatibel met App Router, Server Components en SSG
Officiƫle Ontwikkelaarsdocumentatie

Complete handleidingen en API-specificaties nodig?

Ontdek parameterreferenties, authenticatie en lokaal testen in onze officiƫle Next.js Component & Loader-handleiding.

Lees Next.js Component & Loader Documentatie

Geef je Next.js Component & Loader Beeld-pipeline een Boost

Ervaar AVIF- en WebP-optimalisatie in minder dan 50 ms. Geen installatiekosten, directe sandbox-sleutels.