Next.js

Here are steps to use Gumlet service with Next.js v10

Suggest Edits

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

You can use Next.js image loader component to load images in correct size from Gumlet image optimization service. Here is sample code for the same.

📘

Heads up!

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

import Image from 'next/image'

const gumletLoader = ({ src, width, quality }) => {
  return `https://example.gumlet.io/${src}?w=${width}&q=${quality || 75}`
}

const MyImage = (props) => {
  return (
    <Image
      loader={gumletLoader}
      src="/me.png"
      alt="Picture of the author"
      width={500}
      height={500}
    />
  )
}

Updated over 1 year ago