This is a example template for optimizing images with Next.js version 10.
You can read more about this on my Dev.to Blog.
Instead of using an img tag, you can drop in instead. All you have to do is
import Image from 'next/Image'
then replace the img tag with Image tag for a local image in the public folder and add a width and height.
<Image
src="/images/terrarium.jpg"
alt="Terrarium"
width={1600}
height={1200}
loading="lazy"
quality={35}
sizes="(max-width: 600px) 100vw, (max-width: 1023px) 48vw, 23vw"
/>
npx create-next-app nextjs-imgopt --use-npm --example "https://github.com/daletom/nextjs-imgblog"
then run a
npm install
to install the dependencies. The go into the project
cd nextjs-imgopt
and run the site in development
npm run dev