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?
No description
1 Reply
pkpio
pkpio2mo ago
Here's my domain setup on Vercel and my DNS records are set accordingly