Navigation

[00:00:00]
>> All right, let's write some stuff for our app then. So for, let's get some routing here. So I'm going to go into the root layout, I'm going to add some navigation here, and we'll learn about how to navigate using the link component. So inside of here, I'm just going to make a header.

[00:00:19]
So for the header then I was gonna add a nav here and then I was gonna add a ul here. I'm just gonna add a class name here, make it flex items, item-center. This is just making it a flex box and making a line item-center. Then I'm just gonna go up here and make an array.

[00:00:43]
Call it links, like so. It's gonna be an array of objects that have an href. We wanna go to /todos. And we'll say label is todos. And then I say I wanna go home. So I'll have slash, I'll make that home. And then I want to go to maybe after home I want to go to docs and that would be docs like that.

[00:01:11]
So we got our links, And all I'm gonna do is just iterate over those links. So I'll say links.map. Grab our link, like so. And I'm just going to do an imperative return here. And then what I want to do is make an li. And this is where you'll probably make an anchor tag and link it to each href.

[00:01:39]
But if you do that, you are not taking advantage of next.js's navigation features where they have a smart router that can do tons of different things like pre-fetching, client-side routing. You want to opt into that. So the way you do that is use the link component. So I'm just gonna bring that in.

[00:01:57]
I'm gonna start typing it out and it should auto import it for me from next/link, link component. So we use that link component. And then here I'm going to put a href and set it to the link.href, right? And then inside of it, it'll just be link.label. And just to get this thing to shut up about a key, I'll put link.href.

[00:02:27]
Cool, so you should have something like that. And again, as I'm writing this, don't forget that I do have all the code here on the repo that you can go check out. In fact, that code is probably in here somewhere, yeah, right here. So you can check that out if you wanna catch up on that.

[00:02:50]
So there we go. So we have that. Now if we go back because we added that to our route, we should see something like this. So home, I click on Home it goes Home. I click on Docs, it goes to Docs. I click on Todos, it goes to Todos.

[00:03:09]
And notice that when I click on Todos, the dashboard layout loads in too. The only other thing I'm going to do is I'm just going to get rid of everything in the index page because it's bothering me.
>> I've got one question for you, Scott.
>> Yes.
>> Just a quick one regarding the link component.

[00:03:25]
Are there any props you've encountered or used besides the href prop? Anything else we should be aware of or is it really just like yeah, it's an a tag but it opts you into the client-side routing.
>> Yeah, so it supports any property that the anchor tag would support, so that's one thing.

[00:03:43]
There's also some other tags associated with it that are pretty advanced
>> Let me see. So they have prefetch. So prefetch basically this means like I don't know someone hovers over this link or optimistically if this link is going to a page that is then going to fetch data, start doing that before someone clicks on it.

[00:04:07]
So when they do click on it, it's already cached and ready to go. So you might see something like that. I almost rarely use that but it's a thing. I guess it's kind of like turbolinks and Ruby. I can't remember. I haven't wrote Ruby in so long. I think that's what turbo links did.

[00:04:23]
But it's like pre-fetching, yeah. Other than that, no, it's pretty much the same as an anchor tag, yeah. Cool, yes.
>> So if a layout never re-renders, and if you put the nav in a layout, then you can't change the styling depending on that route, is that correct?

[00:04:44]
>> Then you can't change the styling depending on that route.
>> Or can't change the contents of the nav. Maybe that's a better example.
>> You can't change the contents of nav depending on the route. You can if you made it a client component. So if you made it a client component where it uses something like a hook that listens for route changes, and then it changes its behavior based off that, then yeah.

[00:05:13]
Because then now your layouts not opt into the basic server behavior. It's now just in a regular React rendering lifecycle methodology, where if you change state or if you change a hook, it re-renders. So you could, but I personally try not to make any of my layouts client components.

[00:05:32]
In fact, I try to make nothing a client component. That is my goal. And we'll be talking about client components soon. And in fact, we haven't talked about them, is because you already know what they are. They're just regular React components. You just gotta add a little thing at the top that we'll talk about a little bit.

[00:05:46]
But yeah, I try not to make any component client component unless there has to be JavaScript in order for them to interact with it. And I'm very specific about that, because not all interactions require JavaScript. But some do and that was the only time I want to use a client component, usually keeping track of state.

[00:06:03]
That's almost the only time I use client component, yes.
>> What's the difference between the link imported from next/link or next/navigation?
>> That is a good question. I think the one from, I think the one from navigation might be the new preferred one that they want people to use.

[00:06:28]
But the differences, I think, are internal differences that relate to how the app router works versus the page router works. So from a user perspective, I think the API is exactly the same. But I think it opts into different background behaviors that those two different routing scenarios use.

[00:06:47]
So for right now it's gonna work the same, but I guess that's what they recommend using. This one just hasn't been deprecated yet. So I think for now, it's probably fine but in the future, you probably wanna use the one from navigation.