Part 6: Creating a Reusable Navigation Bar in Your Next.js Blog

[Page] Routing and Navigation

[Page] Routing and Navigation

When building a blog application, navigation is a crucial element that enhances user experience. In our previous post, we added a navigation link on the Home page to the About page. Now, let's extend this functionality by creating a reusable navigation bar that can be used across multiple pages.

The Need for a Reusable Component

Currently, our blog app allows navigation from the Home page to the About page. However, once users reach the About page, there are no links to navigate back or to other sections. While we could copy the navigation block into other pages, it's more efficient to make it a reusable component. This approach not only saves time but also ensures consistency across your site.

Step 1: Create the NavBar Component

First, we'll create a new file for our navigation component. Let's name this file NavBar.js.

Here's how you can define the NavBar component:

// File: components/NavBar.js
import Link from 'next/link';

function NavBar() {
  return (
    <nav>
      <ul>
        <li>
          <Link href="/">
            Home
          </Link>
        </li>
        <li>
          <Link href="/about">
            About
          </Link>
        </li>
      </ul>
    </nav>
  );
}

export default NavBar;

Understanding the Code

• Link Component: We use the Link component from next/link to enable client-side navigation, which enhances performance.

• Reusable Component: The NavBar component is a standard React component that returns a navigation structure.

Step 2: Implement NavBar in Your Pages

With our NavBar component created, we can import it into our pages to replace the existing navigation code.

Updating the HomePage

In index.js, replace the existing navigation code with the NavBar component:

// File: pages/index.js
import NavBar from '../components/NavBar';

function HomePage() {
  console.log('[HomePage] render');
  return (
    <>
      <header>
        <NavBar />
      </header>
      <main>
        <h1>My Blog</h1>
      </main>
    </>
  );
}

export default HomePage;

Updating the AboutPage

Similarly, update the about.js file to include the NavBar component:

// File: pages/about.js
import NavBar from '../components/NavBar';

function AboutPage() {
  console.log('[AboutPage] render');
  return (
    <>
      <header>
        <NavBar />
      </header>
      <main>
        <h1>About</h1>
      </main>
    </>
  );
}

export default AboutPage;

Step 3: Organizing Your Components

It's important to organize your project files correctly. Initially, you might have placed the NavBar.js file inside the pages directory. However, Next.js uses a filesystem-based router where files in the pages directory are exposed as web pages.

Moving the NavBar Component

To prevent the NavBar component from being exposed as a standalone page, move it to a separate components directory at the root of your project. This way, it's treated purely as a reusable component and not as a web page.

Conclusion

By creating a NavBar component and using it across multiple pages, we've enhanced the navigation functionality of our blog app. This approach exemplifies the power of reusable components in React applications. Remember, in Next.js, it's essential to keep reusable components out of the pages directory to avoid unwanted exposure as web pages. With this setup, your blog will provide a seamless navigation experience for users. Happy coding!