This course has been updated! We now recommend you take the Introduction to Next.js 13+, v3 course.
Transcript from the "Navigation" Lesson
[00:00:00]
>> So now that we have our routes and stuff, let's talk about navigation. How do we actually move between the routes, how do we actually make that happen? Is it just an anchor tag or how does that work? Well, in order to talk about that, we should talk about how Next.j.s handles navigation.
[00:00:18] It's doing some pretty crazy stuff in the background. And this is why it's nice to have a framework on top of a framework because it's doing some pretty crazy stuff. So let's talk about how the navigation works in Next.js. There's a lot of stuff happening behind the scenes.
[00:00:30] It's like a deep delve into this. I was looking at the source code, I was talking to people about it. They're doing some crazy stuff. It's kind of they use the routes for everything, it's really insane. But I kind of like it, it makes sense. So a route transition is initiated using a link component or calling router dot push.
[00:00:47] We'll talk about some of those things. The router updates the URL in the browser's address bar, right, so the address bar gets updated. And then the router avoids unnecessary work by reusing segments that haven't been changed. For instance, layouts. Like I said, layouts don't get changed. So just use that in a cache from a client side cache and then basically, it only renders the things like the pages or something else that needs data partially.
[00:01:16] So only some parts of the page actually gets rendered when you go to a new route and not the entire page. That's happening for you for free, you're not to do anything. You just pick your routes, you add your layouts, and it does that for you for free, which I think is super powerful.
[00:01:31] If the conditions of a soft navigation are met, which is basically like, we only kind of gotta change this one thing over here, the router fetches the brand new segment from the cache rather than the server. So pages themselves actually get cached on the client side. And then instead of going back to get the new page and re-render it, if it determines that there really wasn't any changes due to data that you pulled, it'll be like, I was gonna get it from cache.
[00:02:00] It'll load it instantly. So all that's happening for you for free too whatever you try to route somewhere. If not, if you can't do that, then it'll just try to actually re-render the whole component from scratch and do whatever data pulling that it needs to do and do that.
[00:02:16] If it does have to go to the server, it'll do this loading UI thing, we'll talk about that in a minute, and then it'll cache that for route changes in the future. So that's a lot of stuff that's happening whenever you just try to change a route, which is way different than what React Router might do or any other thing.
[00:02:35] So I wanted that to be exhaustive and detailed just so you understand how much work is happening when you try to navigate with Next.js. You do not need to know all of this. It took me a week to figure out how all that works. So it's nice, you don't need to know all that.
[00:02:48] But the first thing is using the link component. This is the one that's synonymous to an anchor tag. So let's talk about that. So let's make a link component. So what we can do is, first, how about we go into, let's do it here on the homepage here.
[00:03:06] Actually, I kind of like the way the homepage looks, I don't wanna mess it up. It looks really good. [LAUGH] Let's go to the contact page here. I'm gonna delete this layout here and start it here. So let's say I want to link somewhere else. So the first thing I'm gonna do is, I'm gonna import a link tag.
[00:03:23] Actually I got auto-import here, so we'll say link. And you're going to import link from next slash link. You already have installed, you don't have to install, it's already there. So that's the first thing. I'm just gonna return a div here. And just put some stuff here so we can actually see it, contact.
[00:03:50] And then I'm just gonna make a link tag here. So I'm gonna say, link, and I'm gonna make this go to home or something like that, right? So I can say link, then, yes Mark?
>> Can you explain what soft navigation is?
>> I'll try, there's so much you have to understand.
[00:04:10] So soft navigation is, so there's a concept that we're gonna talk about when it comes to caching, revalidating, and fetching data on the server side. Soft navigation is when React determines that based off of those three things that not too much has changed, so therefore it doesn't have to redo work.
[00:04:34] So it's only just going to update the UI without having to refresh the data because it determined that not much has changed. So you might be used to React doing a reconciliation phase on the front end where it's using a virtual dom, it's dirty checking to determine what components to render on the client.
[00:04:54] Okay, it's taking that a step further, and now it's doing that with, what data did the component fetch, and what route did you go to? What is your revalidation strategy for that cache? And that's going to determine that this one little component gets rendered. So it's really event.
[00:05:12] So soft navigation is like, yeah, we determined that, nothing really here has changed. So we need to put the new UI on the screen. So that's a soft navigation. Okay, so for href, it's kind of just like an anchor tag. So I can say go home just like that, and it'll go home.
[00:05:32] All right, so if I do that, go here, I click on home, it goes home. And everything on that list that I just described happened. But you have to use these built-in mechanisms. You have to use the link component. If you just use an anchor tag and go, you're still gonna get to the page.
[00:05:57] But it's gonna cause a complete re-render of everything, a re-fetch of everything, a reload of everything. You'll still get there, but it's the equivalent of just going in here and hitting enter. Or if I was at contact and then I just got rid of this and said, go here, it's equivalent of doing that.
[00:06:15] That's just a refresh of everything, that's gonna be much slower. Obviously in this use cache, it's just as fast cuz I'm a local host, I'm not fetching any data to render this page. But if I was, it would still be much slower. Cool, and then if you want to do dynamic stuff, maybe you wanna link to a blog, then you just need to interpolate, nothing crazy.
[00:06:45] To do that, you do that, you can say slash blog and then slash. If you had a variable here for a slug, you put that variable there, it will go there, right? So you just interpolate, just regular JavaScript stuff, nothing unique to next, very simple. So that's how you would use an anchor tag, which is called link.
[00:07:06] But what if you wanted to navigate programmatically, like after some action, somebody did something so I need to go somewhere? Well, in order to do that, you have to use this provided hook that they give us from the navigation. But before we do that, we're gonna talk about something that you thought you were doing, but you were not doing, and then we'll dive into it.