How to import image in Next.js ?

Next.js is a full-stack React-based framework. Unlike a traditional react app, which loads and renders the entire application on the client, Next.js allows the first-page load to be rendered by the server, which is great for SEO and performance.

Some of the key features of Next.js are: 

• Server-side rendering
• Image optimization
• Static Site generation
• Incremental Site regeneration.

You can learn more about Next.js here. In this article, we will learn to import images in Next.js using the Image component.

Image component in Next.js (next/image): Next.js Image component is an evolved form of <img/> element in HTML. It comes built-in with performance optimization which helps in achieving good Core web vitals. This performance boost is factored in Google’s ranking algorithm, hence improving the ranking of our website.

The Image component supports the following built-in optimizations: 

1. Improved Performance: It serves different image sizes for each device, which reduces image size for smaller devices and thus improves performance.
2. Faster Page Loads: Images are not loaded until they enter the viewport, hence enabling the web page to load faster.
3. Asset Flexibility: It supports various configurations such as resizing the Image component via props.
4. Visual Stability: It automatically prevents Cumulative Layout Shift, which is a layout error that occurs when elements get shifted after being rendered by DOM. It determines the overall stability of our website’s layout

Properties of Image Component: The image components support the following props: 

• src (required): This property accepts a path string, an external URL, or a locally imported image.
• width (required): It represents the image’s rendered or original width in pixels. For locally imported images, this property is optional.
• height (required): It represents the rendered height or the image’s original height in pixels. For locally imported images, this property is optional.
• layout: It determines the behavior of the image size when the viewport width changes. It supports the following values: 
  • intrinsic: It is the default behavior, which scales the image down to the width of the container, up to the image size.
  • fixed: It keeps the image fixed to the given width and height.
  • responsive: It scales the image to fit the container’s dimensions.
  • fill: It causes the image to fill the container. It also makes the width and height properties optional because the container will determine them.
  • raw: It allows the image to be rendered without any automatic behavior.

Working with Image component: Run the following command to create a new Next.js project.

npx create-next-app@latest gfg

Project Structure: 

For the scope of this article, we will only focus on the public and pages directory. The public directory contains all the static files that need to be served when the Next.js app is built for deployment. 

In this example, we’ll create and add three images with different sources, one will be imported from the public directory, the second image will be served through the static path from the public directory and the other one will be served from an external URL. You can add your image to the public directory (Here we’ve added gfgLogo.png). And for the external URL, we’re using this image, but for the external URL to work, we’ll have to add its domain name to the next.config.js file to protect our application from malicious users.

We’ll first clean up some boilerplate code in the pages/index.js (Home Page) and import the Image component. 

pages/index.js

import Image from "next/image";

const HomePage = () => {
    return (
        <>
            {/* This is a local import, so the
            height and width props are optional */}
            <div>
                <Image src={gfgLogo}
                    alt="GFG logo imported from public directory" />
            </div>

            {/* This image is also served from public
            directory but using the static path */}
            <div>
                <Image
                    src="
https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210420155809/gfg-new-logo.png"
                    alt="GFG logo served with static path of public directory"
                    height="100"
                    width="400"
                />
            </div>

            {/* This image is being served from an
            external URL, for this URL to work we
            will need to add the hostname
            'media.geeksforgeeks.org' to our
            next.config.js file */}
            <div>
                <Image
                    src="
https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210420155809/gfg-new-logo.png"
                    height="100"
                    width="400"
                    alt="GFG logo served from external URL"
                />
            </div>
        </>
    );
};

export default HomePage;

/next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images : {
    domains : ['media.geeksforgeeks.org']
  }
}

module.exports = nextConfig

Step to run the application: Run your Next app using the following command:

npm run dev

Output: