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.
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