Routing, Linking and Redirecting in Next.js

hey how's it going everyone it's lee holiday and in this video we're going to learn some different ways to do linking and routing in next.js and it came about because i saw a question uh somewhere online i don't remember where asking if uh nexjs has a redirect component some of the other routing libraries like i believe react router has something like this where you can say return redirect to say the about page and basically if some conditions true if condition you would put that and move that in there you would redirect uh sort of by returning i think that's declarative redirecting no next gs does not have this but we're going to create one today and we're going to cover some other ways you can do routing in next.js as well i've put a commit right now where we're at so if anyone wants to follow along please be welcome what we're doing is we're in an xjs application um we're using no additional packages so if you go to the package.json you get only the packages required for nexjs but i've already set up the imports so we're going to be working with the use router hook to to access the next.js router and we're going to be using the link component as well so in this little component i've got next.js sort of linking and routing and then native linking and routing so native i have two options option one is the good old a tag with an href so this is just linking to the about page which is here and says nothing except this is the about page so if we go to the web we can click this link and it will take us over see it took a sec though like it's not a long second but you click it takes a second to load it's re-rendering everything it's remounting react and all of that stuff when you do linking in next.js it won't have to remount react and do all of that so it's quite a bit quicker here's another way it's sort of doing it imperatively sort of in code button on click what we're doing is we're basically replacing the window.location.href with the about page so this is another way by clicking this button it will link us over to the about page so why don't we do the same sort of thing in next.js so the first thing we're going to use is the link component so we'll just throw this here and the way link component works is that we're going to give it an href so we're also going to send this to the about page and inside of here you put in a tag but you don't put the href here link will take care of all of that for us all we need to do is say html link actually this would be the next link right pop over to the browser let's go back to the home page so boom that takes us to the about page so really simple but see how quick it is this one remount it takes a second it's spinning the other one it's instant happens right away and that's because next js is handling all of that it's doing single page apps so it's it's changing out the page component without having to re remount react and all of that stuff so that's step one the next one we're going to cover is basically the same idea as this here that we're doing in the button except we're going to do that using react router instead so what we're going to do first of all and we'll just do it below these comments here this is so i can remember what we're actually going to cover in this video we'll do it right here so the first thing we need to do is use the use router hook from next router so this gives us the router and we say use router router and router has some some functions we can call to transition the user to a different page so we'll put a button here and we'll say just take us to the about page but we're going to do that in an on click inside of an arrow function here and what we're going to do is we're going to say router push so what this does is it pushes the user to um to the about page but it will do it using the next routing so it won't have to remount react and it will be just as quick as as doing it with a link and way quicker than doing it using the native functionality here so if we click the about that pops over to the about page um really quickly why don't we put them in the same order as our other one so that it looks nice like that that's right okay so it's time to create um a redirect component now so what we're going to do is uh we'll just declare this function functional component right here so we're going to call it redirect we're going to pass in a prop called to and then inside of here we'll handle all of the redirect so what we need here is we need access to the router because that's how you push the user to a new page so we're going to say router is use router hook to give us that and what we're actually going to do is do the actual redirecting um inside of a use effect hook so what we're going to do is we're going to say use effect like this and we will pass in the to prop here so that whenever the two prop changes is when this use effect will be triggered and what we'll do inside of this use effect is basically the same idea as router.push here so we'll say router.push to the to prop that's passed in and because use effect happens after the initial render we're just going to return null that's sort of what's rendered and then the use effect will take in and the user will be pushed to whatever the 2 is but it's so fast that you won't even see this null so i wouldn't worry about that but so we have to use our redirect component down here and we could just say redirect to the about page like that and return it and essentially as soon as you render the home page it instantly kicks you over to the about page because it's happening right that's what's returning but why don't we sort of control it with state instead so that it's when the user triggers something getting all these uh work pop-ups popping up here okay so we're going to create some state first so we'll call it uh should redirect and set should redirect is equal to use state false so what we'll do is we'll say if should redirect that's when we're going to return this redirect component so now we need to set up a button that toggles the state so that it re-renders so that the return is is what's returned and then that's what will trigger this redirect code up here so we're just going to create a little button we'll call it uh redirect and we'll say on click what we're going to do is we're going to say set should redirect to true just like that so we go to the home page we have our redirect when i click this it will toggle the state triggering a re-render which will return this redirect component which will after the initial render in the use effect um the router will push to the to the new page whatever we passed in as a prop here so clicking that it was so fast right but there's a lot of stuff happening when you click this little redirect button so that's another way that you can do it um another way we could maybe control whether redirect isn't through our own state but maybe when there's something in the uh the url here um maybe when there's a parameter let's let's actually add it in a query parameter as count is whenever count is equal to five it's going to redirect so we want to get access to this and check to see if it's equal to 5. so what we'll do is using the router we want to get access to its query params so we'll say const query is equal to router and why don't we just take a look at what's inside of the query so we'll do a console.log to get access to the query and we can see here it's five down here but if we refresh it's actually rendered empty for the very first time and then it re-renders with the five in there and the reason it does that is because next.js is generating this page statically so it has no sort of concept of what's in your url it re it renders first without any concept of what's in the url then the router kicks in and it re-renders with the query parameters so you're not you have to sort of keep that in mind as you're building this that it won't have the query parameters on the very first render often so count equals five so why don't we just put that into a variable here so const count is equal to and what we'll say is um we'll say query dot count um it may not be there on the first render so if that's the case we'll just default to one and because this always comes in as a string this here we're going to parse it so we'll say parseint using a base of tens of normal sort of integers and now we have a count and you'll actually see that it's one quickly and then it quickly takes over back to five when it has that um so what we could do is we could say um if count is equal to five i don't know why you would redirect when count is equal to five but take me to the about page so it already took me there why don't we go back and we'll say count equals four nope it's all good as soon as it hits five it will redirect to the about page so the reason i sort of set up this count uh a was to show you how the queer how you can access the query params and a different way we can sort of use our redirect component but also to show how something called shallow routing works shallow routing is basically a way in next.js to change the query parameters which will trigger a re-render to give you the new query data without triggering all of the data loading functions that next.js comes with what is it like get initial state get server side props all of those things you can basically change the url only on the same page so it can't be on a different page but you can change it on the same page triggering a re-render without using loading all of that data again so you can use this in a sense to store some state in the url so what we're going to do is we're going to have a increment uh button here and we'll show the count state here so if we were to come back increment one right now because that's what count is and on click what we're going to do is trigger a shallow render that will increment that count and change the url um without sort of doing all of that data those data fetching methods we're not using those here but if we did have them they wouldn't be running so what we'll do is we'll say router.push and we need to tell it what url to push it to so we're going to push it to the same page the home page and we're going to say the count is now equal to count plus one so whatever the increment is the next one is as url in their example it looks like you can just pass undefined i think you would do that when it's the same if someone wants to correct me in the comments please be welcome to do that mask's url for the browser performs a push state with arguments so i think this is when you're using dynamic routing where the the file based routing has dynamic placeholders and you want to have the url be different than the component you're actually rendering maybe we'll do a different video on dynamic routing but for now we'll just put in undefined and we'll pass an option that says shallow true so clicking this will update the url to this triggering a re-render getting us the new query parameters and it will do it in a shallow way to avoid data fetching so increments to two three four as soon as i hit five it does the redirect so we are essentially storing and changing state inside of our inside of our url so like this the cool thing is doing it this way a lot of maps do that so you're moving around the map because then if you were to take the url paste it to your friend and they would load it they get the exact state that you have because the state is buried in the url not inside of in react state which you can't really copy and paste so that's an interesting way of managing state using shallow rendering in nextgs and that's all i wanted to copy today we basically learned how to to do linking using the link component imperatively using router.push we created our own redirect component that's essentially using this router.push functionality inside of a use effect and then we took a look at how to access query parameters from the router and then basically how to use that to store state so that when it counts up to five via these uh shallow renders down here it's gonna transition to the about page using this redirect component that we built hope you enjoyed the video have a good day take care bye

Channel: Leigh Halliday

Views: 17,614

Keywords: nextjs link, nextjs router, nextjs shallow routing, nextjs router push, nextjs redirect

Id: rwmZMjWpPYc

Length: 15min 16sec (916 seconds)

Published: Fri Nov 27 2020