So now we built a bunch of dummy components,
a bunch of dummy page components here.
Of course our application.
If you want to call it like that,
isn't doing anything useful though.
And it's not doing anything useful on purpose
because I just wanna to show these core features first
before we then later combined what we know to
build something more realistic, to build a real application.
Now, up to this point, we have all those different pages
and components, but we can only navigate between them
by manually changing the URL.
And that's of course not very realistic.
In reality, we typically wanna navigate through links
or programmatically when some action completed
and therefore that what we're going to have a look at
right now and for this let's go to our main index JS file.
So directly in the pages folder,
this homepage component here,
there, let's say we now also wanna
add a bunch of links so we can add a unordered list
component with a couple of lists items.
And then in every list item, we want to have a link to some
of those pages we created here.
For example, we could add links
to the portfolio index and to our clients index.
Now, how do we do that?
Normally we add links with an anchor tag.
We can do this here as well.
We could add a link like this and it would work,
but this has a disadvantage.
Now let's add it like this though.
Let's add a link as an anchor tag
Hence if we go back to just our domain slash nothing
we see that link.
If I click it, I'm taken to the portfolio page.
It works, but it has a disadvantage.
The disadvantage here is that with such a standard link,
we in the end send a brand new HTTP request to
load this new page, which means that any application state
we might have when our running React app would be lost.
If we have some App-wide state, which is stored
with React context or Redux,
it would be lost since we send a brand new request
and we get a brand new HTML page.
And that's not really the idea of building a React app
no matter if you're using Next.js or not, you wanna stay
in that app and you want to manage App-wide state.
That shouldn't change just because you use Next.js,
because if that would not work this way anymore
it would actually be a disadvantage and not an improvement.
So therefore we typically don't want to use links like this.
Instead when using React Router in a non Next application,
we import a link component from React Router.
And with Next.js, it's the same
for this we again import something from Next
but now not from Next router, but from Next link.
And we import link.
Important here not between curly braces,
because link is the default export
of this link package from the Next library.
So we import link
and the link is a component which we can use
and we can use it as a replacement for the anchor tag.
So we can simply replace a with link.
Now link has a href prop, which we can set, so we don't even
need to change this.
And the href prop also takes a string with the path
to which we wanna navigate.
Now, if we save that therefore,
and we go back to our starting page.
If I now click on portfolio,
I still go to the portfolio page.
But now without sending a HTTP request behind the scenes
without losing any app-state we might have
and the link component actually also has a couple
of other tricks up its sleeve.
It has a couple of other improvements.
For example, it automatically pre fetches any data
off the page we might navigate to as soon
as we hover over the link and so on.
So these are some advanced optimizations which
will become important later.
Now on this link component
we can also set a couple of other props of, for example
we can set a replace prop to not push this new page
but replace the current page with it.
So that we can't go back that can sometimes be useful.
And we can also set a couple of other options,
which we'll dive in later.
For the moment href is the most important option.
And therefore of course, now we can add another list item
with another link where we wanna go to our clients.
So here we could then set href to slash clients
to be taken to that client's page.
If you go back and reload this
and go to clients here we are.
Now on that client's page,
we might want to go to our individual clients.
So we want to plug in a value for that dynamic ID
and therefore an index JS in the client's folder here.
I also want to add a couple of links
and I want to now navigate to dynamic routes.
And that's what we're going to take a look at
in the next lecture.