Original subtitles

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.