Custom NextJS image loader with cloudflare

Problem

Our NextJS Application are occasionally overloaded. Cause not catch-up rendering then get old pages.

Solution concept

For reduce NEXT JS load and optimize images, We plan change Next JS Image loader to Cloudfalre resize api

Cloudfalre image resizing document

Link

Enable image-resizing in cloudfalre

Link

create a fuction for image optimization

import { ImageLoaderProps } from 'next/image';

export const contentDomain = 'https://content.letgo.com.tw/';

const normalizeSrc = (src: string) => {
  return src.startsWith('/') ? src.slice(1) : src;
};

export const cloudflareLoader = ({ src, width, quality = 75 }: ImageLoaderProps) => {
  const params = [`width=${width}`, 'format=auto'];

  if (quality) {
    params.push(`quality=${quality}`);
  }
  const paramsString = params.join(',');

  return `${$contentDomain}cdn-cgi/image/${paramsString}/${normalizeSrc(src)}`;
};

export const getCloudflareImageUrl = (
  src?: string,
  width?: number,
  height?: number,
  quality?: number,
  fit?: string,
  options?: string[]
) => {
  const params: string[] = ['format=auto'];

  // todo default image
  if (!src) {
    return;
  }

  quality = quality || 75;

  if (width) {
    params.push(`width=${width}`);
  }

  if (height) {
    params.push(`height=${height}`);
  }

  if (fit) {
    params.push(`fit=${fit}`);
  }

  if (quality) {
    params.push(`quality=${quality}`);
  }

  if (options) {
    params.push(...options);
  }

  const paramsString = params.join(',');

  return `${contentDomain}cdn-cgi/image/${paramsString}/${normalizeSrc(src)}`;
};

Useage

Specify the NextJS image loader

It is recommended to use NextJS image in Next. it will make better experience on our website.

   <Image
    loader={cloudflareLoader}
    src={`${$projects.content}${item.Image}`}
    width={175}
    height={175}
    alt={'promo image'}
    ></Image>

Another useage. You can call the getCloudflareImageUrl method to get the optimized image url

<div style={{ backgroundImage: `url("${getCloudflareImageUrl(contentURL + communityJson.Content.Image)}")` }} >
</div>