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!
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>
</>
);
}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.
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.
Link ComponentReplace 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>
);
}After updating the links:
The counter should no longer reset when navigating between pages.
Navigation feels faster because it happens client-side.
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.