Skip to content
MikanDev Docs

MikanDev Images

  • MikanDev Images is a simple API tat optimizes images, and delivers them through a CDN.
  • This is primarily for dynamically rendering images when using static site generators, but can be used for other purposes as well :)

Hosted API

  • Endpoint: https://images.mikandev.tech/
  • This public API is free to use, and is accellerated with BunnyCDN.
  • Once an image is generated once, it is cached for one month and is not regenerated with the same parameters until then.

Experimental Endpoints

  • Endpoint 2: https://aws.images.mikandev.tech/
  • This API works the same as the hosted API, but is accelerated with AWS CloudFront.

Caching policy

Images are cached for one year, and are not regenerated with the same parameters until then.

API Usage

https://images.mikandev.tech/image/(URL)?width=(width)
  • Replace (URL) with the URL of the image you want to generate.
  • Replace (width) with the width of the image you want to generate.

The API will return an image with the specified width.

NextJS Integration

  • This API can be used with NextJS by using the Image component. All that is required is a custom loader file.
  • This may be useful when using NextJS static exports, as NextJS doesn’t natively support image optimization when exporting statically.
  • You could also use it in a fullstack deployment to reduce load on your origin server.

Example

  1. Create a file named loader.ts in the root of your project, and add the following code:
"use client";


export default function ImageLoader({
    src,
    width,
    quality,
}: { src: string; width?: string; quality?: string }) {
    const isLocal = !src.startsWith("http");
    const query = new URLSearchParams();


    const imageOptimizationApi = "https://images.mikandev.tech/image";
    const baseUrl = "https://base.domain";


    const fullSrc = `${baseUrl}${src}`;


    if (width) query.set("width", width);
    if (quality) query.set("quality", quality);


    if (isLocal && process.env.NODE_ENV === "development") {
        return src;
    }
    if (isLocal) {
        return `${imageOptimizationApi}/${fullSrc}?${query.toString()}`;
    }
    return `${imageOptimizationApi}/${src}?${query.toString()}`;
}
  • Make sure to replace (baseUrl) with the base URL of your project.
  1. Add the following lines to your NextConfig file:
const nextConfig = {
    images: {
        loader: "custom",
        loaderFile: "./loader.ts",
    // the rest of your NextConfig
  1. Enjoy :)