SmallPict LogoSmallPict
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:npm install @smallpict/next
Package TYPESCRIPT

Exemple 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.

Lire la Documentation 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.