Capítulo 405 de 456

images

Core Idea

Configures a custom image loader function to delegate Image Optimization to a cloud provider instead of Next.js's built-in Image Optimization API.

Key Concepts

  • images.loader: 'custom' to use a custom loader file instead of the built-in optimizer.
  • images.loaderFile: path (relative to project root) to a file that default-exports a loader function.
  • Loader function signature: ({ src, width, quality }) => string, must return the final image URL.
  • loader prop: alternative to global config, pass the function per next/image instance.

Code Examples

module.exports = {
  images: {
    loader: 'custom',
    loaderFile: './my/image/loader.js',
  },
}

export default function myImageLoader({ src, width, quality }) {
  return `https://example.com/${src}?w=${width}&q=${quality || 75}`
}
  • O que demonstra: configuração global de loader customizado e a assinatura mínima que qualquer loader de provedor precisa implementar.

Reference Tables

Provedores com exemplo de loader pronto na doc: Akamai, AWS CloudFront, Cloudinary, Cloudflare, Contentful, Fastly, Gumlet, ImageEngine, Imgix, PixelBin, Sanity, Sirv, Supabase, Thumbor, ImageKit.io, Nitrogen AIO. Todos seguem o mesmo padrão: montar uma URL com width/quality mapeados para os query params específicos do provedor (ex: Cloudinary usa w_${width},q_${quality}, Supabase usa width/quality diretos).

Key Takeaways

  1. Loader customizado é a forma de sair da otimização de imagem própria da Vercel/Next.js e usar CDN de imagem de terceiros.
  2. loaderFile é resolvido relativo à raiz do projeto, não ao arquivo de config.
  3. Para casos pontuais, prefira a loader prop no componente em vez de global config.

Connects To

  • next/image component / Image Configuration Options: onde ficam as demais opções (domains, formats, sizes) além do loader.
AnteriorhttpAgentOptionsPróximologging