Okay.
Now that we got this second page here,
it would of course also be great
if we could get to this page
in any other way than manually updating the URL,
because no one does that.
It would be nice to have a link to that second page.
And for that, on that starting page,
we could add a new paragraph here,
and then maybe add an anchor element
where we say About Us.
And here the address then could be /about,
to go to that page.
With that done, indeed, we have that link here,
and if I click it, I'm taken to this About Us page.
But this approach now has a flaw.
It's not ideal, and you can see that there is a flaw
if you take a look at this refresh icon up here,
as I click About Us,
you will see that it briefly turns to a cross,
which always is a sign
that a brand new page was downloaded from the backend.
So, we left the current page and got a brand new page.
The disadvantage with that is that we now no longer
have a single-page application
as we normally do when working with React.
Now, of course, to some extent that makes sense,
because I mentioned that with NextJS,
you would build full-stack applications
where the content is rendered on the backend,
and therefore it makes sense
that it's no longer happening in the front-end
on the client side.
But actually the great thing about NextJS
is that we get both.
When we visit a page for the first time
by, for example, manually entering the URL,
then indeed it's rendered on the server,
we get the finished page, and we're here.
But if we are on a page
and we then navigate around by clicking links, for example,
NextJS allows us
to actually stay in a single-page application
and update the UI with help of client-side JavaScript code.
Now, technically the content of the Next page
will still be pre-rendered on the server,
but it will then be updated on the client side
with client-side JavaScript code, you could say.
And therefore you can get the best of both worlds,
a highly interactive, reactive client-side application
once it's active,
but a finished page being served
if you are visiting the page for the first time,
so, if you did not navigate around on it yet.
However, at the moment, we're not getting this benefit.
With that link here, the page is always reloading,
and we're not in that single-page application.
And the reason for that
is that we're using the regular anchor element.
That works, but it does
get us out of that single-page application.
In order to stay in there,
we have to use a special component called Link,
which we can import from next/link.
This is a component provided by the NextJS framework,
which you should use instead of the anchor element
if you have some internal link as we have it here.
So, if you have a link that leads
to another page of your website.
It then still takes the ref prop
and you could still also add other props
like className and so on.
But now it is a component that will actually ensure
that we stay in that single-page application.
So, with that link component being used here,
if you now take a look at that refresh icon,
as I click this link, you see it never changes to a cross.
It always stays the same,
which proves that we're not leaving the page,
we're not loading a brand new page.
Instead, behind the scenes,
the content of the next page will still be rendered
on the server,
but it'll then be sent to the client,
and there it'll be handled by client-side JavaScript code
to update what we see on the screen.