SmallPict LogoSmallPict
Integrazione Ufficiale e SDK

Ottimizzazione immagini a latenza zero per Next.js App Router e Pages Router

Ottimizza i componenti next/image senza appesantire le funzioni serverless di Vercel. Sfrutta trasformazioni all'Edge e caching CDN ultra veloce.

Installa:npm install @smallpict/next
Pacchetto TYPESCRIPT

Esempio di Implementazione

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;

Passaggi di Integrazione

1Installa il Loader

Aggiungi la dipendenza @smallpict/nextjs usando npm, pnpm o yarn.

2Configura next.config.js

Imposta images.loaderFile puntando al tuo endpoint SmallPict.

3Usa il Componente Image

Importa il componente standard next/image con supporto automatico ai formati AVIF e WebP.

Vantaggi Principali

  • Evita costi aggiuntivi sulle funzioni serverless di Vercel e Netlify
  • Trasformazioni al volo con codifica in formati AVIF e WebP
  • Generazione automatica di segnaposto sfocati LQIP
  • Completamente compatibile con App Router, Server Components e SSG
Documentazione Ufficiale per Sviluppatori

Hai bisogno di guide complete e specifiche API?

Esplora i riferimenti ai parametri, autenticazione e test locali nella nostra guida ufficiale per Componente e Loader Next.js.

Leggi la Documentazione di Componente e Loader Next.js

Accelera la pipeline di immagini Componente e Loader Next.js

Ottimizzazione di immagini AVIF e WebP in meno di 50 ms nella tua applicazione. Nessun costo di configurazione.