daletom / nextjs-imgblog Goto Github PK

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