Part 67: Building a Dynamic Navigation Bar in Your Next.js Application

[Pages] Authentication

[Pages] Authentication

In the journey of building a robust Next.js application, a dynamic navigation bar (NavBar) is crucial for a seamless user experience. Our SignInPage now communicates with a custom login API, setting a cookie with a JSON Web Token (JWT) upon successful login. But what happens after that? Let’s dive into creating a NavBar that adjusts based on user authentication.

Understanding the JWT Cookie

After logging in, a JWT is stored in a cookie, visible in your browser's developer tools under the Application tab. This token helps identify if a user is authenticated. We can leverage this information to customize our NavBar, displaying user-specific information or a Sign In link for guests.

Designing the NavBar Component

The NavBar should dynamically change based on the user's authentication status. We'll use a user object to simulate this status, which will eventually be replaced with real data.

Step 1: Create the NavBar Component

First, let's create a simple NavBar with links to the HomePage and the SignInPage. In a real-world application, this NavBar can be extended with more links and styling.

// components/NavBar.js

import Link from 'next/link';

function NavBar() {
  const user = undefined; // Placeholder for user data

  return (
    <nav className="px-2 py-1 text-sm">
      <ul className="flex gap-2">
        <li className="text-lg font-extrabold">
          <Link href="/">
            Next Shop
          </Link>
        </li>
        <li role="separator" className="flex-1" />
        {user ? (
          <>
            <li>{user.name}</li>
            <li>
              <button>Sign Out</button>
            </li>
          </>
        ) : (
          <li>
            <Link href="/sign-in">
              Sign In
            </Link>
          </li>
        )}
      </ul>
    </nav>
  );
}

export default NavBar;

Step 2: Add the NavBar to the Page Component

To make the NavBar accessible on all pages, include it in a common Page component. This component acts as a wrapper for the content of each page.

// components/Page.js

import Head from 'next/head';
import NavBar from './NavBar';
import Title from './Title';

function Page({ title, children }) {
  return (
    <>
      <Head>
        <title>{`${title} - Next Shop`}</title>
      </Head>
      <header>
        <NavBar />
      </header>
      <main className="px-6 py-4">
        <Title>{title}</Title>
        {children}
      </main>
    </>
  );
}

export default Page;

Styling the NavBar

For a more polished look, let's add some basic styles using Flexbox. The goal is to have a responsive NavBar with links properly spaced.

  • Flexbox Layout: The ul element uses Flexbox for horizontal layout, with gaps between items.

  • Responsive Links: The first link (website name) appears larger and bolder to mimic a logo, while other links are smaller.

  • Separator: An empty list item with flex-1 acts as a separator, pushing the Sign In link to the right.

Displaying User Information

The NavBar adapts based on the user object:

  • Authenticated User: Displays the user's name and a Sign Out button.

  • Guest User: Displays a Sign In link.

In a real application, the user object will be dynamically populated based on authentication status. For now, it's a placeholder to demonstrate functionality.

Testing the NavBar

To see the NavBar in action:

  1. Sign In: Click the Sign In link to navigate to the SignInPage.

  2. Home Link: Click Next Shop to return to the HomePage.

  3. Toggle User: Simulate user authentication by toggling the user variable.

Future Steps

With the UI set up, the next step is to dynamically fetch and manage the user data. This involves using the JWT to verify the user's identity and adjust the NavBar accordingly. This will enhance the user experience by personalizing the application interface based on authentication status.

Stay tuned as we explore user authentication and session management in future posts!

PreviousPart 66: Enhancing Your API with Secure Cookie Management and Environment VariablesNextPart 68: Creating a Secure User Authentication API in Next.js

Last updated