Next.js Image Loader

Custom Loader Function

Create a custom image loader for the Next.js Image component:

// lib/icefiery-loader.js
export default function icefieryLoader({ src, width, height, quality }) {
  const baseUrl = 'https://cdn.icefiery.com/res';
  const params = new URLSearchParams();
  
  if (width) params.set('width', width);
  if (height) params.set('height', height);
  if (quality) params.set('quality', quality);
  
  return `${baseUrl}/${src}?${params.toString()}`;
}

Configure Next.js

Add the loader to your next.config.js:

// next.config.js
const nextConfig = {
  images: {
    loader: 'custom',
    loaderFile: './lib/icefiery-loader.js',
  },
};

module.exports = nextConfig;

Using the Image Component

Now use Next.js Image components with Icefiery image IDs:

import Image from 'next/image';

export default function MyComponent() {
  return (
    <Image
      src="img_abc123def456"
      alt="Product photo"
      width={400}
      height={300}
      quality={85}
    />
  );
}

The loader automatically generates the correct Icefiery URLs with transformations based on the Image component props.