

<p>Hello, today we're going to learn how to create a responsive navbar in your NEXT JS application.
  As navigation is a key aspect of your website that allows users to explore it, better implementation of this navbar in desktop, tablet, and mobile can help you improve the website's accessibility,
  which will ultimately retain your website visitors. Let me show you how I implemented it on my website, https://muhamadalzika.com, which is based on NEXT JS. </p>
  <h3><strong>1. Project setup.</strong></h3>
  <p>Open your project on vscode studio or create your Next.js project using bellow command in your terminal</p>

  ```bash
npx create-next-app@latest
```
<p>Then will, show like below.</p>

```bash
What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like your code inside a `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to use Turbopack for `next dev`? No / Yes
Would you like to customize the import alias (`@/*` by default)? No / Yes
What import alias would you like configured? @/*
```

<br>
</br>
<p>In this tutorial, I'm not using TypeScript. You can select 'Yes' for all of them except <strong>TypeScript</strong>.</p>

<br>
</br>

<h3><strong>2. Setup your folder.</strong></h3>
<p>You can follow my folder structure setup below.</p>

<br>
</br>

![folder Image](/images/Screenshot%202024-09-01%20130537.png)

<br>
</br>

<h3><strong>3. Write the code in the Navbar.js file.</strong></h3>
<p>You can follow the code bellow.</p>

<br>
</br>

```jsx
"use client"
// components/Navbar.js
import { useState } from 'react';
import Link from 'next/link';
import { FaBars, FaTimes } from 'react-icons/fa';
import { IoSearch } from "react-icons/io5";
import { AiOutlineShopping } from "react-icons/ai";
import { FaRegHeart } from "react-icons/fa";
import { RiAccountBoxLine } from "react-icons/ri";

const Navbar = () => {
const [isOpen, setIsOpen] = useState(false);

const toggleMenu = () => {
    setIsOpen(!isOpen);
};

return (
<nav className='bg-transparent p-4 shadow
 sticky top-0'>
<div className='flex items-center justify-between
space-x-2 h-16 max-w-screen'>
<div className='flex items-center '>
<Link href="/">
<h1 className='text-black text-md md:text-2xl
sm:text-md font-bold'>Logo</h1>
</Link>
</div>
<div className="relative ">
<input
type="text"
className="pl-10 pr-4 py-2 w-32 md:w-64 sm:w-48
 text-xs
md:text-md border
border-gray-300 rounded-md focus:outline-none
 focus:ring-2
focus:ring-black"
placeholder="Search..."
      />
<button className='absolute left-3
 top-2 text-gray-500'>
<IoSearch size={20}/>
</button>
</div>
<div className='md:hidden pt-2'>
<button onClick={toggleMenu}
 className='text-black
focus:outline-none'>
{isOpen ? <FaTimes size={24} /> :
 <FaBars size={24} />}
</button>
</div>
<div className='flex space-x-2'>
<div className='md:flex space-x-2 hidden
 md:block'>
<Link href="/" className='hover:animate-bounce
hover:transition-delay-300
hover:ease-in-out hover:bg-gray-100
text-black hover:text-gray-800
font-semibold text-sm py-1 px-2 rounded
shadow text-sm'>
<p>about</p>
</Link>
<Link href="/" className="hover:animate-bounce
 hover:transition-delay-300
hover:ease-in-out hover:bg-gray-100 text-black
hover:text-gray-800
font-semibold py-1 px-2
 rounded shadow text-sm ">
<p>service</p>
</Link>
<Link href="/" className="hover:animate-bounce
hover:transition-delay-300
hover:ease-in-out hover:bg-gray-100 text-black
hover:text-gray-800
font-semibold py-1 px-1 rounded
shadow text-sm">
<p>contact</p>
</Link>
<div className='relative pt-1'>
<button className="relative hover:animate-bounce
hover:transition-delay-300
hover:ease-in-out hover:bg-gray-100 text-black
hover:text-gray-800
py-1 px-1 rounded shadow text-sm">
<RiAccountBoxLine className='font-semibold'
 size={20} />
</button>
</div>
</div>
<div className='relative pt-1'>
<button className="relative hover:animate-bounce
hover:transition-delay-300
hover:ease-in-out hover:bg-gray-100 text-black
hover:text-gray-800
py-1 px-1 rounded shadow text-sm">
<FaRegHeart className='font-semibold' size={20}/>
<span className="absolute top-0 right-0 transform
translate-x-1/2
translate-y-1/2
text-xs bg-red-500 text-white rounded-full h-4 w-4
 flex
items-center
justify-center">0</span>
</button>
</div>
<div className='relative pt-1'>
<button className="relative
 hover:animate-bounce
hover:transition-delay-300
hover:ease-in-out hover:bg-gray-100
 text-black
hover:text-gray-800 py-1
px-1 rounded shadow text-sm">
<AiOutlineShopping className='font-semibold'
 size={20} />
<span className="absolute top-0 right-0 transform
translate-x-1/2
-translate-y-1/2
text-xs bg-red-500 text-white rounded-full h-4 w-4
flex items-center
justify-center">0</span>
            </button>
        </div>
        </div>
        
      </div>

{/* Mobile menu */}
<div className={`md:hidden ${isOpen ?
'block' : 'hidden'}`}>
<div className='flex flex-col space-y-4 mt-4'>
<Link href="/" className='animate-bounce
 hover:bg-gray-100
text-slate-300
hover:text-gray-800
font-semibold py-2 px-4 rounded shadow transition
duration-300
ease-in-out'>
            <p>about</p>
          </Link>
<Link href="/project" className="animate-bounce
 hover:bg-gray-100
                text-slate-300
                 hover:text-gray-800
font-semibold py-2 px-4 rounded shadow  transition
 duration-300
               ease-in-out">
<p>project</p>
</Link>
 <Link href="/about" className="animate-bounce
 hover:bg-gray-100
text-slate-300
hover:text-gray-800
font-semibold py-2 px-4 rounded shadow  transition
 duration-300
ease-in-out">
 <p>contact</p>
</Link>
<button className="relative animate-bounce
hover:bg-gray-100 text-slate-300
hover:text-gray-800 font-semibold
py-2 px-4 rounded shadow  transition duration-300
 ease-in-out">
<RiAccountBoxLine className='font-semibold'
 size={20} />
<span className='bottom-3 items-center'>Log-in</span>
</button>
        
</div>
</div>
</nav>
);
};
export default Navbar;
```

<br>
</br>
<p>After that, you have to import the 'Navbar file' into Layout.</p>
<br>
</br>

```jsx
import { Inter } from "next/font/google";
import "./globals.css";
import Navbar from "@/component/navbar";

const inter = Inter({ subsets: ["latin"] });
export const metadata = {
title: "Create Responsive Navbar",
description: "Create Responsive Navbar by using Next.js",
};

export default function RootLayout({ children }) {
return (
<html lang="en">
<body className={inter.className}>
<Navbar/>
{children}
</body>
</html>
  );
}
```

<br>
</br>
<p>And optionally, in the page.js file, you can write anything. If you're confused, you can follow me by writing this code in the 'page.js' file.</p>
<br>
</br>


```jsx
export default function Home() {
  return (
    <div className="flex
 justify-center items-center min-h-screen">
      <main className="container
 mx-auto p-4 text-center">
        <h1 className="text-3xl
 font-bold">Welcome to My store</h1>
        <p className="mt-4">
This is the homepage.
</p>
      </main>
    </div>
  );
}
```

<br>
</br>


<p>So, you have to run the code by typing npm run dev in your terminal.</p>
<p>It will seem like this.</p>

<br>
</br>

![Project Image2](/images/Screenshot%202024-09-01%20131234.png)

<br>
</br>

<p>Thanks for reading!

Thank you for reading! If you found this post helpful, please spread the word.

We'd love to hear from you! Let us know how we can better assist you by sharing your suggestions.

Contact us: <https://muhamadalzika.com/about>
Email: <zikafakk@gmail.com>
</p>



How to create a responsive navbar by using next.js for beginners.

How to create a responsive navigation bar in next.js


<p>Do you ever feel confused when trying to come up with ideas for a web project? Sometimes, when learning web development, we struggle to decide what we want to create or build. If you're experiencing this, I have some solutions to help you overcome it.</p>
<p>Firstly, let me share my experience of how I got the idea to create a web app project as a beginner. While I was learning a new programming language, I felt confused about how to apply it to a real project. I overthought it for a week, wasting time in the process. During that same period, I had a problem managing my time. That’s when I got the idea to solve my problem by using what I knew about web development to create my own app. I built a simple project to manage my time using React.

Before this, I didn't know how to apply my knowledge to a real project, even though there were many videos on YouTube explaining various projects. However, I chose not to watch them because I didn't want to fall into the "tutorial hell" trap. After coming up with the idea, I started working on the project and finished it within a week. I was really happy because, for the first time I was able to create something. Even though the project was very simple, it helped me in many ways.

The lesson I learned after finishing my project is that ideas often come when you face a problem. You can implement code to solve your own problems and turn it into an app. Essentially, to become a programmer or web developer, you need to solve problems. Create an app and solve it. This is the simple project I created when I had a problem. </p>
![](]('https://second-papper.vercel.app/')
[![Project Image](/images/Screenshot%202024-08-24%20064142.png)](https://second-papper.vercel.app/)

<p>This is an open-source project. If you want to use it, you can use it for learning.</p>
<p>Thanks for your attention!</p>
<p>I will write tutorials on HTML, CSS, and simple JS projects for beginners. So, stay tuned!</p>


A personal story about getting the idea for a web app project as a beginner.

Muhamad Alzika

Articles tagged with "react"

How to create a responsive navigation bar in next.js

How to Get the Idea to Create a Web App Project as a Beginner