Too many redirects error with image resizing on NextJS

Here’s my image loader file: cloudflareImageLoader.ts

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

export default function cloudflareLoader({
}: {
  src: string
  width: number
  quality?: number
}) {
  const params = [`width=${width}`]
  if (quality) {
  const paramsString = params.join(',')
  const isDev = process.env.NODE_ENV === 'development'
  const baseUrl = isDev ? '' : ''
  return `${baseUrl}/cdn-cgi/image/${paramsString}/${normalizeSrc(src)}`

Here’s my NextJS config file: next.config.mjs

import rehypePrism from '@mapbox/rehype-prism'
import nextMDX from '@next/mdx'
import remarkGfm from 'remark-gfm'

/** @type {import('next').NextConfig} */
const nextConfig = {
  pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'mdx'],
  images: {
    loader: 'custom',
    loaderFile: './src/lib/cloudflareImageLoader.ts',

const withMDX = nextMDX({
  extension: /\.mdx?$/,
  options: {
    remarkPlugins: [remarkGfm],
    rehypePlugins: [rehypePrism],

export default withMDX(nextConfig)

Only some images are transformed and render on my site (locally and in prod). For most of them I keep getting this error - ERROR 9421: Too many redirects

This is my site: - What did I do wrong?

This topic was automatically closed after 15 days. New replies are no longer allowed.