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:
Paquete TYPESCRIPTnpm install @smallpict/nextEjemplo 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.
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.
