Here are steps to use Gumlet service with Next.js

Next.js v10 and above has in-built support for image optimization. Gumlet can be easily integrated with just a few lines of code.

You can use the Next.js image loader component to load images in the correct size from the Gumlet image service. The easiest way is to write a custom image loader like this.

export default function gumletLoader({ src, width, quality }) {
        let parsedUrl = new URL(src);
        parsedUrl.hostname = "<your_gumlet_subdomain>";
        parsedUrl.searchParams.set("w", width);
        parsedUrl.searchParams.set("q", quality || 80);
        return parsedUrl.toString();
    } else {
        return `${src}?w=${width}&q=${quality || 80}`;
/** @type {import('next').NextConfig} */
const nextConfig = {
  distDir: 'build',
  images: {
    loader: 'custom',
    loaderFile: './utils/imageloader.js',
  //... other config

module.exports = nextConfig

For more details on this, please check next.js documentation.


Heads up!

Next.js version 10.0.5 or above is required for this to work.