Intégration et SDK Officiels
Optimisation d'images à latence zéro pour Next.js App Router et Pages Router
Optimisez les composants next/image sans surcharger les fonctions serverless de Vercel. Bénéficiez de transformations Edge et d'une mise en cache CDN ultra-performante.
Installer:
Package TYPESCRIPTnpm install @smallpict/nextExemple d'Implémentation
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;Étapes d'Intégration
1Installez le Chargeur
Ajoutez la dépendance @smallpict/nextjs via npm, pnpm ou yarn.
2Configurez next.config.js
Définissez images.loaderFile en pointant vers votre endpoint SmallPict.
3Utilisez le Composant Image
Importez le composant next/image standard avec génération automatique de formats AVIF et WebP.
Avantages Clés
- Élimine les surcoûts liés aux fonctions serverless Vercel et Netlify
- Transformations à la volée avec encodage AVIF et WebP
- Génération automatique d'espaces réservés flous LQIP
- Entièrement compatible App Router, Server Components et SSG
Documentation Développeur Officielle
Besoin des guides complets et des spécifications API ?
Consultez la référence des paramètres, l'authentification et les tests locaux dans notre guide officiel Composant et Chargeur Next.js.
Boostez votre pipeline d'images Composant et Chargeur Next.js
Optimisation AVIF et WebP en moins de 50 ms dans votre application. Sans frais d'installation, clés sandbox instantanées.
