Link Component

Link is one of the prebult 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:

JavaScript

import Link from "next/link";

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

JavaScript

import Link from "next/link";

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

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

Link Component

Next.js Components

Similar Reads