What is Link component in Next.js ? - ❤️Next.js Tutorials In 2024

In this article, we are going to learn about the Link component of Next.Js. Follow the below steps to add the Link component in the Next.js application.

Link Component: Link is one of the components in Next.js. It is used to create links between pages in a Next.js app. To create a link, insert the <Link> component into your page, and specify the path to the page you want to link to.

The <Link> component also has the following properties:

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

Creating NextJs application:

Step 1: To create a new NextJs App run the below command in your terminal:

npx create-next-app GFG

Step 2: After creating your project folder (i.e. GFG ), move to it by using the following command:

cd GFG

Project Structure: It will look like this.

Example: Adding Link in Next.Js. To use the link component first we are going to create one new file name ‘first.js’ with the below content.

first.js

// Importing the Link component 
import Link from 'next/link'
  
export default function first() { 
    return ( 
        <div> 
            This is the first page. 
            <br/> 
            {/* Adding the Link Component */} 
            <Link href="/"> 
            <a><button>Go to Homepage</button></a> 
            </Link> 
        </div> 
    ) 
} 

index.js

// Importing the Link component 
import Link from 'next/link'
  
export default function Homepage() { 
    return ( 
        <div> 
            This is the Homepage page - w3wiki 
            <br/> 
            {/* Adding the Link Component */} 
            <Link href="/first"> 
            <a><button>Go to first page</button></a> 
            </Link> 
        </div> 
    ) 
} 

Here we are first importing our Link component from ‘next/link’. Then we are using this component to navigate between pages.

Step to Run Application: Run the application using the following command from the root directory of the project.

npm run dev

Output: This will start the development server for your Next.Js application.