NextJs

How to add an image in next.js?

Full details article for next.js image component and image optimization. This article is part of next.js #SeriesPart8.

Rajdeep Singh
FrontEnd web
Published in
6 min readDec 6, 2021

--

Next.js introduces image optimization for your website in version 10. For image optimization, next.js provides an image component. After launching the image component, Next.js improves and adds lots of functionality like layout, loader, and onLoadingComplete props to define and improve image loading speed in the browser.

How to add an image in next.js By Rajdeep Singh
How to add an image in next.js

History of the image component

Next.js Head component version history

Demo

What is the image component?

The image component is similar to react component. Image components provide additional functionality to the image, with image components helping to define image size(height, width), alt text, placeholder…

--

--

Rajdeep Singh
FrontEnd web

Follow me if you learn more about JavaScript | TypeScript | React.js | Next.js | Linux | NixOS | https://linktr.ee/officialrajdeepsingh