Introduction to Next.js Page Navigation with the Link Component

Transcript from the "Page Navigation with the Link Component" Lesson

[00:00:00]
>> All right, navigation, what's routing if we can't navigate between pages, right? So how do we do that? It's a little different than what you would normally do. But if you've ever used any routing framework, then it'll feel very familiar. So basically, Next.js gives us a Link component, okay.

[00:00:19] So this Link component allows us to route between pages. The important thing to remember here though. And this is where it starts to get a little challenging to think about, especially if you've never dealt with server side rendering or pre rendering is that the link component is only used to navigate for client-side transitions, right.

[00:00:39] And when I say client side, I mean literally using the HTML5 push state browser, and it's navigating purely on the client side, there's no request to the server. And you'll see when we do this, what I'm talking about. So this is only for client side routing. So if you're trying to get that SPA-like fast navigation behavior, you use the Link component, right?

[00:01:00] And that's what it's used for. If you're not trying to do client side routing, because you're going to an external link or you just want to force a rerender, then you just use an anchor tag, which HTML already has. So the link tag is what Next.js gives us.

[00:01:17] And let's just talk about it a little bit. So it's a little different than what you might have used before. So the first thing is that it has this href prop on it, which is very similar to an href on anchor tag, except it actually doesn't take an href.

[00:01:31] So you're not gonna put a full URL here. Remember, this is client-side routing, so everything's gonna be pretty much relative here. But what you wanna put here is actually gonna be the path to the name of the page, right? So for instance, the name of this page, index.js, would just be /notes because it's the index of notes.

[00:01:54] So it's relative to the pages directory. So that's the name of the page. So that's what you would put in that href. So let's give it a try. So what I'm gonna do is I'm going to go to my index page, I'm going to import this Link from next/link, like that.

[00:02:16] And now what I'm gonna do is I'm gonna just link to some pages here. So we'll do this, and let's get rid of this thing very quick, the h1, I'll put that back in there. And then I'm just gonna make a quick little link here. So you can say Link like this.

[00:02:36] And then we'll put a href. And remember, I've gotta put the name of the page as it is in the pages directory. So in this case, I wanna navigate to notes. That's the name of this page. The other thing is that you can't just put Note in here like this.

[00:02:50] So let me show you why. So if I go back and I go to my Index Page and I click on Note. Okay, in this case, hold on, actually, before I say something, let me just make sure. Okay, yeah, it was smart about it. Okay, so in this case, they took the href and they knew what I was doing and they implied.

[00:03:16] But it's actually safe to actually put an anchor tag in here [COUGH] excuse me, with no href and wrap that around your content. And that's actually recommended in the docs. So if I do that, you get the same thing here. And I think what that does is it passes the href respectively to the anchor tag without losing context of the URL, or at least that's what it used to do.

[00:03:42] It looks like they just imply it now. So I guess that's good, because I always hated wrapping the a, because it always just looks weird with no href. And sometimes you'll have an ESLint linter that'll be like, you can't have an anchor tag with an href. And then you got to go disable that.

[00:03:57] It's just like really annoying. But I highly recommend just wrapping your content inside of a link tag and an anchor tag. That's what you're gonna see in this course. And that's actually what they recommend in the documentation. But it does look like they do some optimizations there with that.

[00:04:10] But I think those optimizations work because it's such a simple route. When we get to more complicated things, it won't work. So, this is pretty much how you use the Link tag when navigating to a static path. Now, what we want to navigate to a dynamic path as in this params thing here, and actually, I'm just gonna change this to being just an ID, since that's what we're going to be using in our app.

[00:04:35] If I want to navigate there, it's a little more work. Not too difficult. So what I'll do is I'll go to the index notes page here. And I'm just gonna say, this is the index note page. And then I'm going to make a link tag as well and import it up top first like that.

[00:05:02] And make a link component like that. So very similar, we add an href. And I'm going to link to /notes/ literally the name of it. So I have to put that, this is the name of that file. Like that, well, not JSX, but just that. So I'm gonna put the name, which is exactly what it is here.

[00:05:25] It's a bracket with id. So this is why I said href is a little different than the href from an anchor tag. You're not actually putting a URL here. This is not the URL to this page. This is the name of the page, this is the path to the page.

[00:05:35] So that's why I put that here. So how do I actually pass it an ID? Well, if you wanna pass in an ID, what you would do is you would say as. Then as takes in a string, so, and then this will take the actual URL. So I could say, well, I want to navigate to /1 like that, right?

[00:05:59] Or if you have some type of variable, you can put that variable here, right? We don't have a variable, so I'm going to put 1, right? So that's gonna allow us to link to a notes page here. So I'm gonna say this is a note for note 1 like that.

[00:06:13] And actually, anchor tag, like that. So we can go to our notes index page, or did I put that in wrong? So, There we go. Here we go. And then I can click on note 1, which will bring us to the note one page. All right, pretty simple.

[00:06:43] They made linking pretty simple. And again, if you need to link somewhere else, you still got a straight up anchor tag. Just link out, it works the same way. This is only for client side routing. Any questions on that? Nope? And yeah, you did hear me talking about that tip for the linter.

[00:07:04] You can tell that really bothered me. [LAUGH] That accessibility issue with the hrefs and the anchor tag and stuff like that. So yeah, fix that. Pretty annoying. All right, and then you can see here I just have a bunch of copy and paste stuff here to follow along.

[00:07:18] But we just live coded, so feel free to copy this stuff into the pages that I just did. I think the only difference that I'm doing here that I didn't do is, I just put a whole bunch of notes on the page, and I linked to them. So you can do that too, if you want to.

[00:07:30] In fact, you know what? I'll just go ahead and copy that, so we can be consistent. And I'll just put that here in the ID page, like that. So we have a nice consistent experience here with some notes like that. Now, let's go to, Programmatic routing. So we talked about routing with the Link tag, which is really cool.

[00:07:55] But what if you need to route programmatically using JavaScript, right? Sometimes you need to do that on some type of event. This person clicked, this response came in, I need to do something, I need to route programmatically. That's where the router comes back in. So so far we've been using the router for the query, but we can also use the router to navigate.

[00:08:15] And it's actually really simple because to me it's just like a proxy on top of the HTML push state router, which has pretty much the same methods. So if you don't have any experience with that, that's fine. Everything extracts that anyway, every router uses that. So I don't expect you to have experience with that router.

[00:08:36] Unless you've built a router library. But this thing pretty much just proxies that. So for instance, if we want to navigate like this, we can make a button, we can say on click, and then we can push to a router. We're not going to do this in our note taking app.

[00:08:50] So I'm not going to just put this in there, but just an example. That's how you would do it. I also link to all the many methods that exist on this router. There's well over ten, there's a lot of methods. Because like I said, it really proxies the HTML5 push state router.

[00:09:06] So there's a lot of things you can do on there, like refresh, replace instead of push, if you wanna just change the history. Different things like that, which is really good for query strings. Stuff like that. So, yeah, you can look at those methods, but the most common one is push, and that's how you would do it.

[00:09:24] The important thing to remember about push is that it pretty much acts very much like Link, it takes the same two arguments. So it's going to take the name of the page, right. So in this case, the name is slash, or in this case, the name is just like we had before.

[00:09:38] And then the as is the actual resolved path, right. So it takes the same arguments. It's not the same as the HTML5 push state, but it is the same method name, push. So just a little different here. And I think that's pretty much the most important thing that you would need to know in Next.js.

[00:09:56] As far as when it comes to routing programmatically. And again, this is only for client side routing. You're not gonna be routing on the server with this. Everything inside of this component is client side, right? Like this logic, you can't do a on click, can't click a button on the server, right.

[00:10:13] So all this happens on the client, all right. So remember that. Any questions on routing and navigation with Next.js?