Integration
Next.js
Custom image loader for next/image
Next.js <Image> requires a custom loader. Define one that maps to the Assets API:
// lib/avvyr-loader.ts
export default function avvyrLoader({ src, width, quality }: { src: string; width: number; quality?: number }) {
const params = new URLSearchParams({
width: String(width),
height: String(width),
fm: "webp",
q: String(quality || 80),
});
return `https://assets.avvyr.com${src}?${params}`;
}
import Image from "next/image";
import avvyrLoader from "@/lib/avvyr-loader";
export default function ProductImage() {
return <Image loader={avvyrLoader} src="/assets/products/sofa.jpg" width={600} height={600} quality={80} alt="Blue sofa" />;
}