Link component for client navigation in NextJS

Introduction

The Link component helps you move between pages quickly without reloading the whole website. It makes your app feel faster and smoother.

When you want to go from the homepage to another page in your app.

When you have a menu with links to different sections of your site.

When you want to link to a blog post or product page inside your app.

When you want to keep the website fast by avoiding full page reloads.

Syntax

NextJS

import Link from 'next/link';

<Link href="/about">About Us</Link>

The href prop tells where to go.

In Next.js 13 and later, you can wrap the text or element directly inside the Link without an <a> tag for proper styling and accessibility.

Examples

Simple link to the Contact page.

NextJS

import Link from 'next/link';

<Link href="/contact">Contact</Link>

Link to a specific blog post inside the app.

NextJS

import Link from 'next/link';

<Link href="/blog/post-1">Read Post 1</Link>

Link with an ARIA label for better accessibility.

NextJS

import Link from 'next/link';

<Link href="/" aria-label="Go to homepage">Home</Link>

Sample Program

This component shows a simple navigation menu with three links. Clicking any link moves you to that page without reloading the whole site.

NextJS

import Link from 'next/link';

export default function Navigation() {
  return (
    <nav>
      <ul>
        <li>
          <Link href="/">Home</Link>
        </li>
        <li>
          <Link href="/about">About</Link>
        </li>
        <li>
          <Link href="/contact">Contact</Link>
        </li>
      </ul>
    </nav>
  );
}

Important Notes

Always use the Link component for internal links to keep navigation fast.

Use the <a> tag inside Link for accessibility and styling if you are using Next.js versions prior to 13.

External links should use a normal <a> tag with target="_blank" if needed.

Summary

The Link component lets you move between pages without full reloads.

Use href to set the destination and wrap content in <a> if required by your Next.js version.

This makes your app faster and better for users.