next-mirag

Next.js image loader for mirag.io — automatic WebP/AVIF conversion, resizing, smart cropping, and caching, served from a global CDN.

Installation

npm install next-mirag
# or
yarn add next-mirag

Quick Start

Option 1: withMirage() wrapper (recommended)

Add to your next.config.js:

const { withMirage } = require('next-mirag');

module.exports = withMirage({ domain: 'yoursite.mirag.io' })({
  // ...your existing Next.js config
});

That's it. Every <Image> component in your app now routes through mirag.io automatically.

Option 2: Manual loader file

Create mirag-loader.js in your project root:

const { createLoader } = require('next-mirag');
module.exports = createLoader({ domain: 'yoursite.mirag.io' });

Then reference it in next.config.js:

module.exports = {
  images: {
    loader: 'custom',
    loaderFile: './mirag-loader.js',
  },
};

Usage

Use Next.js <Image> exactly as you normally would:

import Image from 'next/image';

export default function Hero() {
  return (
    <Image
      src="/photos/hero.jpg"       // S3-backed image
      width={1280}
      height={720}
      alt="Hero"
    />
  );
}

For external images, pass an absolute URL as src:

<Image
  src="https://example.com/photo.jpg"   // fetched & optimized via Web Fetch
  width={800}
  height={600}
  alt="Photo"
/>

Options

| Option | Type | Default | Description | |----------|--------|-----------|------------------------------------------| | domain | string | required | Your mirag.io subdomain | | format | string | "webp" | Default output format: webp, avif, jpg, png |

How It Works

• S3 images (relative src): routed to https://yoursite.mirag.io/path?w=...&q=...&fmt=webp
• External images (absolute src): routed to https://yoursite.mirag.io/web/<base64url>?w=...&q=...&fmt=webp

Next.js controls width and quality based on the sizes prop and device pixel ratio. mirag.io handles the actual transformation, caching, and delivery.

Requirements

• Next.js 12 or later
• A mirag.io account with a configured site

License

MIT