Next.js Mastery Part 2 – Building a Dynamic Navigation Menu

In our first tutorial, we started with "Hello World." Now, it’s time to build something real. Every professional website needs a navigation menu that is fast, SEO-friendly, and easy to manage.

Today, we will build a Dynamic Header for Wisemix Media that fetches categories from a database and works perfectly on both Desktop and Mobile.

1. The Architecture: Server vs. Client

In Next.js, we use a "Hybrid" approach. We split our menu into two files:

1. Menu.jsx (Server Component): This handles the database work.

2. MenuClient.jsx (Client Component): This handles the "Snappy" interactivity like the mobile toggle.

File Structure

Plaintext

src/
└── components/
    └── Header/
        └── Menu/
            ├── Menu.jsx        
            └── MenuClient.jsx  

2. The Implementation

Step 1: The Server Component (Menu.jsx)

This file talks to your database using Prisma. Because it's a Server Component, your database credentials stay safe and the data is fetched before the page even reaches the user.

Path: src/components/Header/Menu/Menu.jsx

JavaScript

import prisma from "@/lib/prisma";
import MenuClient from './MenuClient';

export default async function Menu() {
  // Fetch categories from the database. 
  const categories = await prisma.category.findMany({
    orderBy: { name: 'asc' },
  });

  return <MenuClient categories={categories} />;
}

Step 2: The Client Component (MenuClient.jsx)

This is where the magic happens. We use the 'use client' directive to enable React hooks like useState for the mobile menu.

Path: src/components/Header/Menu/MenuClient.jsx