Now, whilst we're not going
to proceed on this DetailPage for the moment,
whilst we're not going to dive into data fetching
for the moment, I wanna come back to this index.js file
in the news folder and talk about navigation
because currently, I, of course,
always enter URLs in the URL bar manually
and that, of course, is not how users use our website.
Instead, we have links on our website
that allow users to navigate around.
Hence here on this index.js file in the news page,
so on /news page,
we typically don't just wanna say The News Page
but we might also want to display a list
of news items, which are then clickable.
And to do that, I'll wrap this here in a Fragment,
which I import from React
so that we can have a JSON JSX element.
And render a unordered list here.
And in that unordered list,
we could have well, a list of dummy news items.
For example, the NextJS Is A Great Framework article
and then also the Something else article.
Whatever.
So we have two news items here
and these should now be clickable
and then lead to the newsId page with different IDs,
different concrete values encoded in the URL.
Now, when we wanna build a link,
we typically do this by using the anchor tag.
We can create an anchor element
and wrap our text with that.
And then here, we can encode the URL
to which we wanna go.
So in this case, if we wanna stay on this server,
we could say we're going to /news/
and then nextjs-is-a-great-framework
if that would be the identifier of this news item.
And of course, this list could also be generated dynamically
by mapping some array of data into JSX elements.
I'm just hard coding it here
because for the moment,
I wanna focus on the navigation feature.
So that is how we do construct a link
in regular HTML
and if we save this, it also will work.
If I go back to the /news page here,
we actually don't see that it's a link
because in the globals.css file,
I basically disabled the default styling
that would show you that it's a link.
But we can click it
and if I do click it, I am taken to that detail page
for that specific value.
So that is working.
But this is only the second best way
of navigating around in a NextJS app.
It works but watch this refresh icon here
when I click this link.
It briefly turns to a cross
and then goes back to the refresh icon.
This always signals that the browser sends a new request
and gets back a new HTML page.
And that all works but it has a disadvantage.
It means that we don't have a single page application here.
It means instead that we're always sending a new request
to the backend to fetch a new HTML page
whenever the user navigates around.
And that's not our goal here.
It's great that we have those pre-rendered pages
so that when a user initially visits our site,
some content is there right from the start
and it's also great for search engines
but if a user is on the page already
and then navigates around on it,
we wanna stay in that single page application
because that allows us to preserve state
across pages and give the user a better,
a more reactive experience, a better user experience.
That, after all, is one of the reasons for using React,
that we wanna build an interactive UI
where we never send a request for a new HTML page
but where we instead update what's on the screen
with JavaScript, with React in the end.
And we're not doing this here
when we create a link like this.
Instead, we load a brand new page.
We would lose any state we might be storing,
any Redux sate or context state,
all of that would be lost
because we load a new page.
And we simply don't have a single page application here.
Therefore, to stay in that single page application,
we need to create the link differently.
We need to utilize a special component offered by Next,
to be precise, offered by next/link.
That's another sub-package which is responsible for linking
and from there, we can import Link actually
as a default export.
So importing the default export like this.
This imports the Link component from next/link
and that's a special component,
which we can use in our JSX code to build links.
Using it is simple.
You simply use it instead of the anchor tag here.
So I replace a with Link.
We leave the ref attribute, the ref prop
because Link expects a ref prop.
And that then sets the target destination of that link.
It will also then by default render an anchor element.
So all that will still work.
Our styling will still apply.
Yet, if I save and reload,
if I now click this and you watch the refresh icon,
you see that now this never changes to a cross.
Now we instantly go to the second page
and now we go there without fetching a new HTML page.
Instead we are on a single page application
and the visible content on the screen
is actually just re-rendered by React.
And that's great because that allows us
to combine the best of both worlds.
We have this highly interactive
and reactive single page application here
where we can manage and store state across pages
and yet, if a user would visit this page
as an initial page by just entering this URL
and hitting Enter, we would also be able
to return the finished HTML page here.
So search engines would also see that finished page
if they directly visit it.
But if we were on the website already,
and we just clicked the link,
we stay on that single page app,
we stay inside of that single page app.
Because Link, this special Link component renders
an anchor tag but it watches clicks on those anchor tags
and if you click there, it prevents the browser default
of sending a request, at getting a new HTML page.
Instead, it will load the to be loaded component for you
and change the URL
so that it looks like you changed the page
whilst in reality, you stay in that single page application.
And hence, for site internal links
in a NextJS application,
you wanna use the Link component
instead of the anchor tag component
because with that, you get the best of both worlds.