The image optimization backend is used to transform images to the desired format and quality. It should be accessible at /_next/image?url=URL_OF_THE_IMAGE&q=QUALITY&w=WIDTH and should be used as a proxy to the image source.

Streaming is useless for this backend, as we have to wait for the image to be transformed even for the headers. In the future this backend might be enhanced to support streaming.

Environment Variables

• BUCKET_NAME: The name of the bucket where the images are stored
• BUCKET_KEY_PREFIX: The prefix of the key where the images are stored
• OPENNEXT_STATIC_ETAG: If set to true, the ETag header will be set to the hash of the properties of the image (href, width, quality, buildId). This will allow us to return 304 responses when the image properties has not changed.

Special Overrides

Loader

It is used to load internal images. By default, it uses S3 API to load the images from the bucket.

You can customize the loader by providing a custom loader function to the loader prop. It should return

type ImageLoader = BaseOverride & {
  load: (url: string) => Promise<{
    body?: Readable;
    contentType?: string;
    cacheControl?: string;
  }>;
}