SmallPict LogoSmallPict
Integración Oficial y SDK

Optimización de imágenes con latencia cero integrada para Next.js App Router y Pages Router

Optimiza componentes next/image sin sobrecargar tus funciones serverless de Vercel. Utiliza transformaciones en el Edge y caché ultra rápida en CDN.

Instalar:npm install @smallpict/next
Paquete TYPESCRIPT

Ejemplo de Implementación

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;

Pasos de Integración

1Instala el Cargador

Añade el paquete de optimización de imágenes @smallpict/nextjs mediante npm, pnpm o yarn.

2Configura next.config.js

Configura images.loaderFile para apuntar a tu punto de enlace y clave de SmallPict.

3Usa el Componente Image

Importa y usa el componente estándar next/image con formato AVIF y WebP automático.

Beneficios Principales

  • Evita sobrecostes en funciones serverless de Vercel y Netlify
  • Transformación al vuelo con generación de AVIF y WebP
  • Generación automática de placeholders blur LQIP
  • Compatible con App Router, Server Components y SSG
Documentación Oficial para Desarrolladores

¿Necesita guías completas y especificaciones de API?

Consulte parámetros, autenticación, códigos de error y pruebas locales en nuestra guía oficial de Componente y Cargador Next.js.

Leer Documentación de Componente y Cargador Next.js

Potencie el pipeline de imágenes de Componente y Cargador Next.js

Experimente optimización AVIF y WebP en menos de 50 ms. Sin costo de configuración, claves de sandbox instantáneas.