Implement Next.js 10 next/image Component for Image Optimization

Next.js 10 has come up with an exciting feature for built-in Image Component and Automatic Image Optimization. Next.js Image Component is the extension of <img> element of HTML, for modern web. The Automatic Image Optimization allows for resizing, optimizing and serving images in modern web formats like Webp, when browser supports it.
We will discuss and implement the Next.js Image Component and observe image optimization with next/image. We will start the implementation of image component with a fresh Next.js project. Let’s begin!

1. Create Project Directory
Let’s create a project directory and name it as next_image. Open up the project directory on your favorite Code Editor and I’ll prefer vscode for it.

2. Initialize package.json
Open up the terminal containing the project directory and run following command that will create package.json file, which includes our project dependencies and scripts. Including -y on the command will generate the package file with all the defaults.

npm init -y

3. Install React, React Dom and Next
Now, we install React, React Dom and Next for our project with the following command. After installing these dependencies let’s make sure that our Next.js…