Image Component

In Next.js, There is an Image component that is an evolved from of <img/> element in HTML. It use for performance optimization which helps in achieving the good core web vitals. It help to boost Google’ ranking algorithm, hense improving the ranking of our website.

Some Common features of Image Component.

Page Loading Faster: It supports various configuration such as reszing the Image component via props.
Improved Performance of Website: It serves different image sizes for each device, which reduce size for smaller devices and thus improvise performance.

Props of Image Component: There are the some required props

src(required): This prop accept the path string, an URL of the image.
width(required): This prop defines the width size of the image.
height(required): This prop defines the height size of the image

Example: In this example, we will import the simple image in our page using the Image Component.

JavaScript

import Image from "next/image";

export default function ShowImage() {
    return (
        <div>
            <Image
                src="https://media.w3wiki.org/wp-content/cdn-uploads/20210420155809/gfg-new-logo.png"
                height="100"
                width="400"
                alt="GFG logo served from external URL"
            />
        </div>
    );
}

JavaScript

import ShowImage from "./components/ShowImage";

export default function Home() {
    return (
        <div>
            <ShowImage />
        </div>
    );
}

JavaScript

import { hostname } from 'os';

/** @type {import('next').NextConfig} */
const nextConfig = {
    images: {
        remotePatterns: [
            {
                hostname: "media.w3wiki.org",
            },
        ],
    },
};

export default nextConfig;

Output:

Next.js Components

NextJS is a popular and powerful React Framework that simplifies building modern web applications. It was created by Vercel (formerly Zeit), and NextJS simplifies the process of building modern web applications by providing a robust framework.

Table of Content

What is a Component?
Image Component
Link Component
Script Component

Image Component

Next.js Components

Similar Reads