SmallPict LogoSmallPict
Integração Oficial e SDK

Otimização de imagens com latência zero para Next.js App Router e Pages Router

Otimize os componentes next/image sem sobrecarregar as funções serverless da Vercel. Aproveite transformações no Edge e cache em CDN ultrarrápido.

Instalar:npm install @smallpict/next
Pacote TYPESCRIPT

Exemplo de Implementação

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;

Etapas de Integração

1Instale o Pacote

Adicione a biblioteca @smallpict/nextjs usando npm, pnpm ou yarn.

2Configure next.config.js

Aponte images.loaderFile para o seu endpoint e credenciais do SmallPict.

3Use o Componente Image

Importe o componente regular next/image com entrega automática em AVIF e WebP.

Principais Vantagens

  • Evita cobranças extras em funções serverless da Vercel e Netlify
  • Transformações em tempo real com codificação em AVIF e WebP
  • Criação automática de placeholders desfocados LQIP
  • Totalmente compatível com App Router, Server Components e SSG
Documentação Oficial de Desenvolvedores

Precisa de guias completos e especificações da API?

Explore referências de parâmetros, autenticação e testes em nosso guia oficial para Componente e Carregador Next.js.

Ler Docs de Componente e Carregador Next.js

Acelere seu Pipeline de Imagens com Componente e Carregador Next.js

Experimente otimização AVIF e WebP em menos de 50ms na sua aplicação. Sem taxa de configuração, chaves sandbox imediatas.