Create Shared Nav Bar in Next.js with _app.js
Manually typing the URL to navigate between our different pages is becoming cumbersome. Let's create a shared navigation bar that will display on every page in our application.
In this video, we create a new component to display our Nav options - / and /pricing. Each of our routes uses the Next.js <Link> component to make transitions between pages client-side. By rendering our <Nav> component in pages/_app.js, our navbar will display on every page.
Additionally, we would like to dynamically swap out our login and logout options, based on the user's signed in status. In order to do this, we can use the useUser hook and conditionally render each link based on our user's state.
Instructor: [0:00] Now that we have multiple pages in our application, let's create a shared navigation bar so we can easily move between them. Let's create a new file called nav.js in a components folder, and let's build out our basic component. Let's display our nav component on every page by importing it in the _app.js file.
[0:22] We can display it above our component. We see that rendering on our pricing and home page. We want to render out a link for both of those pages. We'll put those inside a nav component. There we have our links, and we can navigate between those two pages. Let's make our nav bar look a little nicer, and maybe add a little margin between our two items.
[0:51] I want to display a Login button if that user is currently signed out, and a Logout button if they're currently signed in. I'm going to need to know about our user's state. We can destructure our user object from useUser.
[1:07] I want to render another link where the href prop depends on whether or not we have a user. If we have a user, we want to go to /logout. If we don't log in, we then want to have an A tag inside of that, again, where the text depends on whether or not we have a user. If we do, we want to say Logout. If we don't, we want to say Login.
[1:26] We probably want to push this link all the way over to the right. We can use ml-auto. That looks good. When I login, we'll see the text, Logout, and we can navigate between our two pages.