Next.js components are integral to building modular and efficient applications, offering tools like Image, Link, Script, and Font to handle media, navigation, scripts, and typography effectively. These components enhance performance and streamline development in Next.js.

What is a Component?

Components are the building blocks in React-based applications, and Next.js provides a powerful way to work with them. It is reusable and it contains (HTML and JSX) and behavior (JavaScript logic) of a UI element, making it easier to manage and reusable code across different parts of an application.

Syntax:

<Component_Name />

Image Component

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

Features:

• Page Loading Faster: It supports various configuration such as resizing the Image component via props.
• Improved Performance of Website: It serves different image sizes for each device, which reduces size for smaller devices and thus improves 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.

import Image from "next/image";

export default function ShowImage() {
    return (
        <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>
    );
}

import ShowImage from "./components/ShowImage";

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

import { hostname } from 'os';

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

export default nextConfig;

Output:

Link Component

Link component is one of the built-in component in Next.js. It is used to create links between the pages in a Next.js app. It is very similar <a/> anchor HTML element. I have written.

There are some common props in Link Component

• href: The path to the page you want to link to.
• rel: The type of link. Possible value are “external”, “internal or “none”.
• title: The title of the link.
• active: Whether the link is active or not.

Example 2: In this example, we will create a two js file in page folder one is index.js other is about. In this example, we are using the Page Routing in Next.js

Project Structure:

Example: This example demostrates the use of link component in next js.

// Filename - pages/index.js

import Link from "next/link";

export default function Home() {
    return (
        <div>
            <div>Home Page</div>
            <Link href="/about">About Page</Link>
        </div>
    );
}

// Filename - pages/about.js

import Link from "next/link";

export default function About() {
    return (
        <div>
            <div>About Page</div>
            <Link href="/">Back To Home Page</Link>
        </div>
    );
}

Output:

Script Component

The <Script> component is a way to include external scripts or libraries in your application. It is often used for loading third-party scripts or adding custom scripts to specific pages. This is a prebuilt Component in Next.js

There are the some Commone Props in <Script/> Component

• src: It is required prop in <Script> Component. This prop define the external javascript url.
• strategy: This prop allow you to control the behaviour of loading and executing the external script.

Example:

import Script from 'next/script'

export default function Page() {
    return (
        <>
            <Script src="https://example.com/script.js"
                strategy="afterInteractive" />
        </>
    )
}

Font Component

To add custom fonts in Next.js, you typically use the next/font package or import fonts in the global CSS. Here’s an example using Google Fonts

// pages/index.js

import { Inter } from "next/font/google";

const inter = Inter({ subsets: ["latin"] });

const HomePage = () => {
    return (
        <div className={inter.className}>
            <h1>Welcome to Next.js</h1>
        </div>
    );
};

export default HomePage;

Output: