Frameworks
Next.js
Use Keenpix as a custom loader for next/image.
next/image lets you swap its optimizer for a custom loader. Point it at Keenpix and keep
using <Image> exactly as before — Next still generates the srcset, Keenpix serves
each width.
1. Add the loader
// keenpix-loader.js
export default function keenpixLoader({ src, width, quality }) {
const host = process.env.NEXT_PUBLIC_KEENPIX_HOST
const project = process.env.NEXT_PUBLIC_KEENPIX_PROJECT
const origin = process.env.NEXT_PUBLIC_IMAGE_ORIGIN ?? ''
// next/image passes `src` as-is; Keenpix needs an absolute URL.
const url = src.startsWith('http') ? src : `${origin}${src}`
const params = new URLSearchParams({ project, w: String(width), fmt: 'auto' })
if (quality) params.set('q', String(quality))
return `${host}/img/${encodeURIComponent(url)}?${params.toString()}`
}2. Point next.config at it
// next.config.js
module.exports = {
images: { loader: 'custom', loaderFile: './keenpix-loader.js' },
}3. Use <Image> normally
import Image from 'next/image'
export default function Hero() {
return <Image src="/hero/spring.jpg" width={1920} height={1080} alt="Spring" />
}Add both your Keenpix host and your image origin host to the project's allowlist
(Settings → Security). Set NEXT_PUBLIC_KEENPIX_HOST, NEXT_PUBLIC_KEENPIX_PROJECT,
and NEXT_PUBLIC_IMAGE_ORIGIN in .env.