Keep getting ERROR 9421: Too many redirects with image transforms with 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,
  width,
  quality,
}: {
  src: string
  width: number
  quality?: number
}) {
  const params = [`width=${width}`]
  if (quality) {
    params.push(`quality=${quality}`)
  }
  const paramsString = params.join(',')
  const isDev = process.env.NODE_ENV === 'development'
  const baseUrl = isDev ? 'https://pkp.io' : ''
  return `${baseUrl}/cdn-cgi/image/${paramsString}/${normalizeSrc(src)}`
}

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

export default function cloudflareLoader({
  src,
  width,
  quality,
}: {
  src: string
  width: number
  quality?: number
}) {
  const params = [`width=${width}`]
  if (quality) {
    params.push(`quality=${quality}`)
  }
  const paramsString = params.join(',')
  const isDev = process.env.NODE_ENV === 'development'
  const baseUrl = isDev ? 'https://pkp.io' : ''
  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)

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: pkp.io - What did I do wrong?

1 Reply

pkpio•4mo ago

Here's my domain setup on Vercel and my DNS records are set accordingly

Gaming

Programming

Keep getting ERROR 9421: Too many redirects with image transforms with NextJS