Part 5: Enhancing Navigation in Your Next.js Blog: Adding Links to Your HomePage

[Page] Routing and Navigation

[Page] Routing and Navigation

Congratulations on creating a new "About" page for your Next.js blog! However, as it stands, users can't navigate to this page from the HomePage. In this blog post, we'll explore how to add a navigation link to the HomePage, enabling seamless transitions between pages.

Adding a Navigation Bar

One of the simplest ways to allow users to move between pages is to add a navigation bar. This feature not only improves user experience but also makes your website more intuitive. Let's see how we can achieve this in Next.js.

Step 1: Update the HomePage Component

To add a navigation link to your "About" page, we need to modify the HomePage component. In React, we need a single JSX root element, so we'll wrap everything inside a React fragment, represented by empty tags <> and </>.

Here's how you can update your HomePage component:

// File: pages/index.js
import Link from 'next/link';

function HomePage() {
  console.log('[HomePage] render');
  return (
    <>
      <header>
        <nav>
          <ul>
            <li>
              <Link href="/about">
                About
              </Link>
            </li>
          </ul>
        </nav>
      </header>
      <main>
        <h1>My Blog</h1>
      </main>
    </>
  );
}

export default HomePage;

Step 2: Understanding the Code

• Header and Navigation: We've added a <header> containing a <nav> element. This <nav> includes an unordered list <ul> with a list item <li> that holds our link.

• Using Next.js's Link Component: Instead of using a standard <a> tag, we're using the Link component from next/link. This component is essential for enabling client-side navigation, which is faster than traditional full-page reloads.

The Benefits of Using Next.js's Link Component

Traditional Page Navigation

When you navigate between pages on a traditional website, the browser requests and loads a new HTML document each time. This can be slower, as each transition involves a server request and a full-page reload.

Client-Side Navigation with Next.js

Next.js optimizes page transitions using client-side navigation, similar to Single Page Applications (SPAs). Here's how it works:

• Preloading: When you load the HomePage, Next.js preloads data for linked pages, such as the "About" page. This means the browser doesn't need to make a new request when you click the link.

• Faster Transitions: Clicking the "About" link results in an instant transition, as the Next.js router handles the navigation entirely on the client side.

The Best of Both Worlds

Using Next.js, you get the speed of client-side navigation and the SEO benefits of server-rendered pages. Users can access the "/about" URL directly and receive a pre-rendered HTML page, but still enjoy quick transitions when navigating through links.

Recent Changes in the Link Component

It's important to note that the Link component underwent changes in Next.js 13. Previously, you needed to nest an <a> tag inside the Link component. However, this is no longer necessary and will even cause errors. The Link component now directly replaces the <a> element for internal navigation.

Conclusion

By adding a simple navigation link to your HomePage using Next.js's Link component, you've enhanced the usability and performance of your blog. This approach allows you to enjoy the benefits of both traditional multi-page applications and modern SPAs. Happy coding, and continue exploring the powerful features that Next.js offers!