Build a Modern Next.js Navbar with ISR and Tailwind CSS (Step-by-Step Guide)
You are a senior Next.js 15 developer building a production-ready blog UI.
Your task is to create a reusable, fully responsive, SEO-friendly Header/Navbar component for a modern tech blog called "WisemixMedia this is example".
## Tech Stack Requirements:
- Next.js 15 (App Router)
- React Server Components (default)
- Tailwind CSS (latest version)
- TypeScript
- Use best practices for performance and scalability
## Core Feature: Navbar/Header Component
Create a clean, minimal, professional header similar to a modern SaaS/blog UI.
---
## 🔷 Layout Structure
The header should be a horizontal flex container with 3 sections:
### 1. LEFT: Logo Section
- A rounded square dark-blue icon
- Inside it: white letter "W"
- Next to it: text "WisemixMedia"
- Font: semi-bold, modern
- Alignment: center vertically
- Spacing between icon and text
---
### 2. CENTER: Navigation Links
Include these links:
- Home (/)
- Tools (/tools)
- Blog (/blog)
- Next.js Mastery (/nextjs-mastery)
### Behavior:
- Active link should be highlighted
- Use usePathname() from Next.js
- Active styles:
- text-blue-600
- font-semibold
- Default styles:
- text-gray-700
- hover:text-blue-500
- Smooth transition
---
### 3. RIGHT: Search Bar
Include:
- Input field:
- Placeholder: "Search posts..."
- Rounded (full or lg)
- Light border
- Focus ring (blue)
- Button:
- Text: "Search"
- Dark blue background
- White text
- Rounded
- Hover effect (slightly darker)
Optional:
- Handle basic form submit (console.log or router push)
---
## 🔷 Styling Requirements (Tailwind)
Main header:
- bg-white
- border-bottom (border-gray-200)
- px-6 or px-8
- py-3 or py-4
- flex
- items-center
- justify-between
Container:
- max-w-7xl
- mx-auto
Typography:
- Clean and minimal
- No clutter
---
## 🔷 Responsiveness
### Desktop:
- Show full navbar
### Tablet:
- Slight spacing adjustments
### Mobile:
- Hide nav links
- Show hamburger menu
- Toggle dropdown menu
Mobile Menu:
- Slide-down or fade
- Include all nav links
- Proper spacing
---
## 🔷 ISR (Incremental Static Regeneration)
Even though header is mostly static:
- Demonstrate ISR usage in layout or page
- Use:
export const revalidate = 60;
OR:
- Fetch navigation data from mock API
- Revalidate every 60 seconds
---
## 🔷 File Structure
Create clean structure:
/components/Header.tsx
/components/MobileMenu.tsx
/app/layout.tsx
---
## 🔷 Code Requirements
- Use TypeScript types
- Clean readable code
- Proper separation of concerns
- No inline messy logic
- Use functional components
- Use "use client" only where needed (e.g., mobile menu, active link)
---
## 🔷 Accessibility
- Use semantic HTML (nav, header)
- Add aria-labels for search and menu
- Keyboard accessible
---
## 🔷 Extra Enhancements (Important)
- Add subtle shadow on scroll (sticky header)
- Sticky top navbar
- Smooth transitions
- Optimize for performance
---
## 🔷 Expected Output
Generate:
1. Full Header component code
2. Mobile menu component
3. Tailwind classes clearly used
4. Example usage inside layout.tsx
5. Optional: basic search functionality
---
## 🔷 Design Reference (IMPORTANT)
Design should match:
- Clean SaaS dashboard style
- Minimalist blog UI
- Similar to:
- Vercel
- Medium
- Modern developer blogs
---
## 🔷 Final Goal
The result should feel like a premium, production-ready blog navbar used in a real-world Next.js application.
