What is Link component in Next.js ?

In Next.js, Link 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.  

Link Component

The Link component in Next.js is a built-in feature that provides client-side navigation between pages without a full page refresh. It optimizes performance by pre-fetching linked pages, enhancing user experience in single-page applications.

Syntax:

import Link from 'next/link';

<Link href="/https/www.geeksforgeeks.org/target">
    Go to Target
</Link>

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.

Steps to Create Next.js App

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.

// Filename - pages/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>
    )
}

// Filename - pages/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.