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:
Pacchetto TYPESCRIPTnpm install @smallpict/nextEsempio 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.
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.
