In the last lecture, we created our first nextjs application.
Now this is not a complete nextjs course and you could actually create a course about this,
I just want to show you the bare basic features so that you can dive deeper,
for example with the github repo I pointed you to.
So let's now see how we can easily navigate from our main index page to the auth index page,
for that we of course need a link and with react router, we use the linked component react router
gave us. Now with nextjs,
we also have a link component we can use,
it's not coming from react router though
but instead it's coming from well, nextjs of course.
So to navigate around, I'll import a new component,
the link component from next/link, important link has a lower case L here in the import path.
Now we can add such a link here,
for example, I can add a paragraph in my main page and say go to and now link auth.
Now for this to work, the link of course needs to be configured to point somewhere and you do this with
the ref attribute like on a normal anchor tag in normal html.
And there, you can point to auth/auth to point to the auth folder and there, it will always pick the index.js
file if you got one.
So link alone won't do the trick though,
you actually still use the normal anchor tag inside of it without the ref attribute though, behind the
scenes, nextjs will basically add the ref attribute to the anchor tag but then capture any clicks
on the anchor tag and handle that internally so that you don't really reload the page.
If we now save this and go back to our application, let's reload the app,
we should see the link down, if we click on it, we go to /auth.
Another cool thing you should be able to see is if you go to the network tab and reload your main
page and you click on auth,
you also see that an extra auth bundle was loaded and that is what nextjs does for you,
automatic code splitting.
By the way, don't be intimidated by the file sizes,
this is not optimized at all,
this contains a lot of development environment overhead.
So that's the automated code splitting you get for free and with the link you see here, you can easily
navigate around in your application.
So that's how we use the link and that is how we can easily get around in our application.
Here also not limited to using the link though,
let's say you have a button where you want to go to auth and you want to do this on a click and therefore
navigate imperatively,
so in your code then you can always do this.
For example here of course by registering onClick listener and then defining a method which should get
executed and that of course could be if you have a class based component,
any method in that component, here I'm just writing it in inline to keep it brief. You then can import the
router from next/router, like this with lowercase r though and then here, you can simply call router
push/auth
and this is a very quick way of imperatively
so in code, navigating around. If you now go back and load your main page, got that button, if you click it, you're
on the auth page now navigated through code with that router object.
This is how you get around, how you use the link in nextjs.
One of the core concepts and it looks super simple but a lot is happening behind the scenes,
most importantly the automatic code splitting which is awesome.
Now let's see what else nextjs gives us and how we work with it.