beginner#next.js#navigation#responsive
Creating a Responsive Navigation Bar with Next.js
Learn how to create a responsive navigation bar using Next.js and CSS.
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.