Linking Between Pages

Creating pages is only part of building an application. Users need a way to navigate between them.

In Next.js, navigation is handled using the built-in Link component. It allows you to move between pages without reloading the entire application, making navigation fast and smooth.

Using the Link Component

To create a link, import Link and use it like this:

import Link from "next/link";

export default function HomePage() {
  return (
    <div>
      <h1>Home</h1>
      <Link href="/about">Go to About</Link>
    </div>
  );
}

When the user clicks the link, Next.js loads the new page without a full refresh.

Why Not Use <a> Tags?

You can use regular <a> tags, but they reload the entire page. This is slower and breaks the smooth navigation experience.

Next.js Link:

• Loads pages faster;
• Keeps the app interactive;
• Improves performance.

Example - Navigation Menu

import Link from "next/link";

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

This creates a simple navigation menu.