[Next.js 15] - Part 5. Link and Navigation

Ace Lennox

27 Dec 20244 minutes to read

Creating smooth navigation between pages is essential for any application. In Next.js, we can use the Link component to enable fast, client-side navigation without reloading the entire page, preserving the state on the client.

In this guide, you'll learn how to build a navigation menu and enhance the user experience by using the Link component instead of traditional HTML tags. Let’s get started!

Step 1: Extract Header into a Component

To organize the code better, let’s move the header into its own component:

Create a new file called Header.js.
Move the HTML for the header from the layout file to this new component.
Replace the header element in the layout with <Header />, and don’t forget to import it.

// components/Header.js
export default function Header() {
  return (
    <header>
      {/* Navigation menu will be added here */}
    </header>
  );
}

// app/layout.js
import Header from './components/Header';

export default function Layout({ children }) {
  return (
    <>
      <Header />
      <main>{children}</main>
    </>
  );
}

Step 2: Add Basic Navigation

Start by creating a simple navigation menu using HTML:

Add a <ul> element with <li> and <a> tags inside Header.js.
Style it with basic CSS for a horizontal layout.

import React from 'react';

export default function Header() {
  return (
    <header>
      <ul className="flex space-x-4">
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/projects">Projects</a></li>
      </ul>
    </header>
  );
}

Issue: This works but causes full-page reloads when navigating between links.

Step 3: Observe the Problem

Add a Counter component to illustrate the issue:

Create Counter.js with a simple timer:

'use client';
import { useState, useEffect } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => setCount((prev) => prev + 1), 1000);
    return () => clearInterval(interval); // Cleanup on unmount
  }, []);

  return <div>Count: {count}</div>;
}

Import and display the counter below the navigation menu in Header.js.

import Counter from './Counter';

export default function Header() {
  return (
    <header>
      <ul className="flex space-x-4">
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/projects">Projects</a></li>
      </ul>
      <Counter />
    </header>
  );
}

Result: Navigating between pages resets the counter because the page reloads entirely.

Step 4: Use the `Link` Component

Replace the <a> tags with Next.js's Link component:

Import Link from next/link.
Replace <a> elements with <Link>.

import Link from 'next/link';

export default function Header() {
  return (
    <header>
      <ul className="flex space-x-4">
        <li><Link href="/">Home</Link></li>
        <li><Link href="/about">About</Link></li>
        <li><Link href="/projects">Projects</Link></li>
      </ul>
      <Counter />
    </header>
  );
}

Step 5: Test the Navigation

After updating the links:

The counter should no longer reset when navigating between pages.
Navigation feels faster because it happens client-side.

Key Takeaways

Use the Link component for internal navigation in a Next.js application.
For external links, the regular <a> tag is sufficient.
Organize your components to keep the layout modular and maintainable.

By following these steps, you can ensure a smooth, efficient navigation experience in your Next.js 15 project.

← [Next.js 15] - Part 4. Layout (UI shared between pages)

[Next.js 15] - Part 6. Understand Prefetching and Caching →

Latest Posts

View All