Link component in Next.js

In Next.js, the Link component is used to create navigation between pages in a Next.js application. Instead of causing a full-page reload (like <a> tag), the <Link> component enables client-side navigation, making transitions faster and smoother. This feature improves performance and creates a better Single Page Application (SPA) experience by pre-fetching linked pages in the background.

• Provides faster navigation between pages.
• Avoids full page reloads (unlike <a> tags).
• Pre-fetches linked content to improve performance.
• Ensures SEO-friendly routing in Next.js applications.

Syntax of Next.js Link Component :

import Link from 'next/link';

<Link href="/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 : Using Link in Next.js

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.

Here:

• We imported the Link component from next/link.
• We used <Link> to navigate back to the homepage without a full page reload.