Jamstack Explorers

Next.js from the Ground Up with Cassidy Williams

Next.js Routing and Links

In this stage, we'll discuss in more detail how routing in the filesystem works in Next.js, and the next/link API.


[00:00:00] We've already pointed out that if a file is added to the pages directory, it will automatically be available as a route. This works for JavaScript files, [00:00:10] but also TypeScript ones too. You can also add JSX and TSX files. You can also make nested routes. For example, if I were to go into our pages directory and make a [00:00:20] new folder and call this blog, I could add another file inside of here, and it could be an index.js, or it could be any other thing, [00:00:30] posts, content about whatever. These will align with browser routes as well. I could take, for example, what we have inside of [00:00:40] index.js in the main pages one, and put it in blog. I'll just call this my blog, say welcome blog [00:00:50] reader like this. Then if I save it and open it up in the browser, we can go to that local host 3000 slash blog, and my blog will be in [00:01:00] the title and we get this welcome blog reader right here. You can also add dynamic routes, but we'll talk about that in the next section. Let's talk about actually navigating between [00:01:10] all of these different pages. The first API I want to talk about is the link API. The router index.js allows you to do client side side route transitions between all the different [00:01:20] pages, like a single page application even though it isn't. What you can do is use the link API where you use import link from Next link, [00:01:30] this react component called link built into Next allows you to do the client side route transitions in your application. If I say welcome [00:01:40] blog reader but I want to be able to navigate back to the homepage, I can do link and then inside of here is where I'll do [00:01:50] an anchor tag like this, and I'll say go back home. Then inside of link, we'll do href equals and then slash to just go [00:02:00] back home. Now this might look a little bit funky but this is how the API works. The href that would normally go on the anchor tag goes into link, [00:02:10] but the anchor tag still exists inside of link itself. Link is the thing that provides the client side transition, but the anchor tag still needs to be there. I can [00:02:20] save this and then go back to our browser. Now when I click go back home, it goes back home. You can have as many links as you want on a certain page. [00:02:30] As long as the route exists, it'll work. Now, let's just say you don't necessarily want to have some component that navigates away to certain pages, but [00:02:40] you want to be able to still route around based on certain events. Well, luckily for you, there's a use router hook. It's a react hook that can be used inside any function [00:02:50] component in your application. For example, let's look at our homepage right here. Let's just say some event happens. Someone clicks button, someone does some thing [00:03:00] we want to be able to navigate around with the router rather than just the link component. What we can do is we can import that hook that I just mentioned, [00:03:10] import use router from Next router. Let's just say, we want to [00:03:20] use this on a button. We want this button to do certain things. We'll say click me [00:03:30] and on click, we want to have some event handler to happen right here. I'll do const handle. Click is [00:03:40] equal to some event handler right here, and we can pass that handle click over to the button. Now, if we want to use the router, [00:03:50] we can call it at the top of our component. Const router is equal to use router, and now we can say something [00:04:00] like event proven default, typical JavaScript stuff here. Then we could say router.push [00:04:10] and navigate to any page. Let's just say we want to navigate to our Pokémon page. Now, [00:04:20] if we were to go back to our browser and actually click that button, look at that, we've navigated to the Pokémon page. These are two ways that you can do client side side transitions in Next.js. [00:04:30] Let's move on to the next section where we're going to talk a little bit more about dynamic routes. [00:04:37]


your progress