What is Link component in Next.js ?

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 - GeeksforGeeks
            <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.