Skip to main content

Next.js

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

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.

note

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.com/${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}    />  )}