Introduction to Responsive Navigation

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

Step 1: Create a New Next.js Project

Create a new Next.js project using npx create-next-app my-nav.

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

Step 2: Create the Navigation Bar Component

Create a new component for the navigation bar.

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

const Nav = () => (
  <nav>
    <ul>
      <li>
        <Link href='/'>Home</Link>
      </li>
      <li>
        <Link href='/about'>About</Link>
      </li>
      <li>
        <Link href='/contact'>Contact</Link>
      </li>
    </ul>
  </nav>
);

export default Nav;

Step 3: Add CSS for Responsiveness

Add CSS to make the navigation bar responsive.

/* styles/globals.css */
nav {
  background-color: #333;
  color: #fff;
  padding: 1em;
  text-align: center;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li {
  display: inline-block;
  margin-right: 20px;
}

nav a {
  color: #fff;
  text-decoration: none;
}

@media (max-width: 768px) {
  nav {
    flex-direction: column;
  }
  nav li {
    display: block;
  }
}

Conclusion

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