# How to Build a Responsive Navbar in Next.js (Step-by-Step)

#nextjs #tailwindcss #saas #webdev

Every modern SaaS landing page needs a clean responsive navbar.

In this tutorial I'll show how to build one using Next.js and Tailwind CSS.

Navbar Structure

Example component:

export default function Navbar() {
 return (
  <nav className="flex justify-between items-center py-4">
   <div className="font-bold">AI SaaS</div>

   <div className="hidden md:flex gap-6">
    <a href="#features">Features</a>
    <a href="#pricing">Pricing</a>
    <a href="#faq">FAQ</a>
   </div>

   <button className="px-4 py-2 bg-purple-600 rounded-lg">
    Get Started
   </button>
  </nav>
 )
}