Creating a Responsive Navigation Bar with Next.js

Introduction to Responsive Navigation Bar

A responsive navigation bar is essential for any website, as it provides an optimal user experience across different devices and screen sizes.

Step 1: Create a New Next.js Project

To start, create a new Next.js project using npx create-next-app my-nav.

npx create-next-app my-nav
cd my-nav

Step 2: Install Required Dependencies

Install the required dependencies, including bootstrap.

npm install bootstrap

Step 3: Create a Navigation Bar Component

Create a new component for the navigation bar using jsx.

// components/Nav.js
import Link from 'next/link';

const Nav = () => (
  <nav className='navbar navbar-expand-lg navbar-light bg-light'>
    <div className='container-fluid'>
      <Link href='/'>
        <a className='navbar-brand'>Home</a>
      </Link>
      <button className='navbar-toggler' type='button' data-bs-toggle='collapse' data-bs-target='#navbarSupportedContent' aria-controls='navbarSupportedContent' aria-expanded='false' aria-label='Toggle navigation'>
        <span className='navbar-toggler-icon'></span>
      </button>
      <div className='collapse navbar-collapse' id='navbarSupportedContent'>
        <ul className='navbar-nav me-auto mb-2 mb-lg-0'>
          <li className='nav-item'>
            <Link href='/about'>
              <a className='nav-link'>About</a>
            </Link>
          </li>
          <li className='nav-item'>
            <Link href='/contact'>
              <a className='nav-link'>Contact</a>
            </Link>
          </li>
        </ul>
      </div>
    </div>
  </nav>
);

export default Nav;

Step 4: Add CSS for Responsiveness

Add CSS to make the navigation bar responsive.

/* styles/globals.css */
.navbar {
  padding: 1rem;
}

.navbar-toggler {
  border: none;
}

.navbar-collapse {
  flex-grow: 0;
}

Conclusion

In this tutorial, you learned how to create a responsive navigation bar using Next.js and CSS.