Routing, Linking and Redirecting in Next.js

[@richierob62]

👍🏾 as usual. One little thing: what is returned from useEffect is a cleanup function that’s run when the component unmounts, not actually something to render.

[@leighhalliday]

Thanks, Richard! I actually didn't use a cleanup function in this example... the `return null` was from the Redirect component itself.

[@sheldonfourie5959]

if you had a course I would buy it for sure. Get on scrimba! You really are great at teaching an emphasize things in such a good way that is not boring

[@leighhalliday]

Thanks Sheldon! New course coming next week hopefully :)

[@samdimahmood9047]

This was a great video! Hoping to see a video on dynamic routing soon!

[@leighhalliday]

Hey Samira! I'll make sure to cover it at some point in the future :)

[@jpbm6369]

That redirect component safe lives, thank you.

[@leighhalliday]

Haha nice, glad it helped!!

[@silenux7419]

Excellent video Leigh. Loving Nextjs, it surpassed Gatsby and it's my default react framework.

[@leighhalliday]

Thank you Silenux! Me too :) Loving Next.js.

[@rvmyangalstar2024]

Excellent explanation 👌👌👌👌

[@leighhalliday]

Thank you Jagan!!

[@NorbyWinner]

👍 excellent explanation, as usual

[@leighhalliday]

Thank you very much, Norb!

[@kunglane]

Best Next.js explanations on YT 😀👍 THANKS

[@leighhalliday]

Thanks S OG!! I appreciate it.

[@hanfriednguegan8321]

Hey Leigh what can i do when i want to pass a state from one component to another when i use history.push() ?

[@ricardovannoort]

Hi Leigh, great video. I was wondering what is the benefit of using the Redirect component (with additional useState and useEffect hook) over a simple router.push in a Link component or button?

[@syz3981]

Hey Leigh, a major problem im noticing is that the if statement causes the html content to not show inside the view source of the page . For example the if shouldRedirect is true and i get redirected to the /about page and u view the source you will not see any of the static HTML inside that page. But if i navigate to /about without being redirected in the if statement and i view source i can see all the html. Have you noticed this? Do if statements break the automatic static optimization ?

[@leighhalliday]

Hey M! Is this causing major issues? I haven't looked into it further but I wouldn't worry about it too much unless it's actually solving issues for your users.

[@ravalikag519]

Such a relief to finally find something I badly needed ! I still need some help though. Leigh, I am using next js and Link components. On my navigation - ex: there is a link /about and I have redirection rules to redirect it to /about-new. The issue is when I click the link it still loads /about and not /about-new (something to do with how Link and next work but unable to figure out ). But when I explicitly type in /about or just refresh the /about page it gets redirected to /about-new. I need the click to redirect as well Could you please help me ?

[@ytPEDROjoao]

I needed this tutorial! thanks

[@regisnut]

shallow routing is kind the persist State in react-router, right? many thanks and what about pathname? params? thanks is it similar to react-router?

[@leighhalliday]

Yup! It's pretty similar... you can access path/params from the router.

[@creative-commons-videos]

Hi why my nextjs app navigation takes time, is it default behaviour or am i doing something wrong ? i can literally count up to 3 after clicking on any links, and seems like nothing happened but after 3 to 4 seconds i can see it transit to clicked page !!!

[@marlonj.remediosgonzalez737]

I have the same issue, was you able to fixed?

[@creative-commons-videos]

@@marlonj.remediosgonzalez737 yes, it is just a default behaviour it's actually prerendering data from api before navigation, so you might need to add some global indicator on routechangeevent

[@marlonj.remediosgonzalez737]

@@creative-commons-videos Thanks so much for your quick anwser, could you help me with some example how can I do that? thanks in advance

[@creative-commons-videos]

@@marlonj.remediosgonzalez737 Router.events.on("routeChangeStart", () => { NProgress.start(); }); Router.events.on("routeChangeComplete", () => { NProgress.done(); });

[@creative-commons-videos]

use this library nprogress and above code on root component, _app.tsx

[@nategage7180]

Hi Leigh, love the thumbnail ;) If I had a component that had a list of cities, and when I clicked on a city, it rendered a list of sports teams (for example) from that city. Now if each of those sports teams were linkable to another url, how would Next.js handle redirecting back to the previous page but still have that city's sports teams pre-selected? Not sure if that makes sense, but I can't find any resources on this anywhere!

[@silenux7419]

Maybe you could store that state linked with query params. So when you redirect back the useEffect kicks in and loads your previous state.

[@nategage7180]

That’s a good idea, I’ll give that a go!

[@leighhalliday]

Hey Nate! I think you have two options... the first is to store your state within query parameters of the URL like I did in this video... or you can store it in localStorage similar to the custom hook I built in this video: kzbin.info/www/bejne/bWW3mZZ8aq-ksLc

[@adamtak3128]

I use the Redirect component with my auth state. If the user isn’t logged in, I redirect them to the login page. Would you say that’s also a good way is using something like this?

[@leighhalliday]

Hey Adam! Yes! I think so.

[@muhammadshahnewaz2787]

How can I hide the empty object without a spinner?

[@leighhalliday]

I think you can just render null, or can add a "hidden" attribute to your HTML.

[@hbela1000]

Excellent, thx.

[@ferrad1]

Hey Leigh loved this video as always I would very much appreciate it if you could make a video about internationalization with nextjs 10 including a language switcher component to go from one language to another. Thank you

[@leighhalliday]

Hey Ferrad! That's a great suggestion... thank you! I'll try to cover that in the future.

[@ferrad1]

@@leighhalliday Thank you very much sir

[@kaisian4940]

Hi, can you do a video about route changing confirmation? For example, when the form is dirty, I want to show the confirmation dialog when the user is navigating to other routes :D

[@leighhalliday]

Hey Kai! Great suggestion... I'll add it to my list of potential videos.

[@chamir4614]

Great video dude, thx you :)

[@leighhalliday]

You're very welcome, Chamir!

[@ericksonmanuelholguin2776]

best redirect ssr

[@leighhalliday]

Thanks Erickson!

[@TheLionelgamer]

Thanks teacher! Hahaha

[@leighhalliday]

Haha, any time!

[@livestreamer5478]

Why nobody makes a video on doing it with more links, and seeing whether the scroll position is maintained?🤫

[@leighhalliday]

Leaving this video for you to do my friend :)

[@godwinebikwo6544]

Leigh Halliday always on holiday getting that shmoney on payday offering us gems every other day 😅

[@leighhalliday]

Haha... trying to produce high quality content! :)

[@shy6892]

iphone notch haircut