All language subtitles for 004 Link Component_en

Now that we understand how pages are rendered,

we can talk about navigation.

I'm running the dev server in

the background as usual.

So, we have a few pages in our application.

About, all the reviews, and the HomePage.

Now, we want to put some links

so our users can navigate

from the HomePage for example to some other page.

We could add a navigation bar to the header,

in the RootLayout.

This way it will apply to all the pages.

So let's add a "nav" element here,

containing an "unordered list".

And then we'll put a "list item" for each link.

In HTML we can use the "anchor"

tag to display a link.

We need to pass a URL as the "href",

and then the text to display, like "Home".

Let's add a few more links.

We want our users to be able to

navigate to the Reviews page.

And then we can repeat the same process,

this time for the About page.

So we'll show links for all our top-level routes.

You can see the result in the browser.

If we click the "Reviews" link,

it opens the Reviews page.

And if we click About, of course we see that page.

It seems to work just fine.

We could make this navigation

bar look nicer obviously,

but we'll worry about styling in another section.

Right now let's see in more details what happens

when we navigate from one page to another.

Let's start from the Home page.

As we know, the browser makes a request

to load the HTML document for that page.

Now, when we click "Reviews",

the browser unloads the Home page,

and make another request,

fetching the full HTML for the Reviews page.

The same will happen if we go to the About page.

Every time the browser replaces the entire page

with another full HTML document

loaded from the server.

This is how traditional websites work.

This approach is also called

a Multi-Page Application,

in the sense that each path

loads a different page.

It's the opposite of a Single Page Application,

where the browser loads a single page,

and then, to navigate to another route,

we use JavaScript, with a framework like React,

to replace one component with

another but in the same page.

That approach is called client-side navigation,

and it's also supported by Next.js.

What we need to do to use that feature

is import the "Link" component

from the "next/link" module.

And then simply replace all the

"anchor" tags with "Link".

Let me see if I can change all of them in one go,

using "multiple cursors" in the editor.

The "Link" component also accepts an "href" prop.

If we save, our links look the same as before.

And if we click on them, they still work fine.

But navigating to each page

seems a little faster now.

Let's see what this means in

terms of network requests.

I'll restart from the Home page.

When we open the first page of our application

the browser still makes a request

to load the full HTML.

Nothing different so far.

But let's clear the requests,

and see what happens when we

navigate to another page.

As I simply move the mouse over a link,

for some reason the browser makes a new request.

It will be the same if I hover

over the other links,

it makes a request for each one of them.

This is called "prefetching",

and we'll talk more about this in the next video.

Because it works differently in production,

rather than in dev.

But for now let me point out that

these requests are not loading an HTML document.

They only fetch some data used

by React Server Components.

Anyway, as I said, I'll fully explain

this in the next video.

For now, let's just ignore these requests.

The important thing is that, if

we actually click on a link

we see the new page content

pretty much immediately,

and yet the browser didn't make any new requests.

That's because our app is now

using client-side navigation.

When we click on a link,

the Next.js router simply replaces

some elements on the existing page

without loading a separate HTML

document from the server.

So, as a user we still see different

content on the page,

but it's displayed instantly, without

having to wait for a server response.

In this sense, a Next.js app behaves

like a Single Page Application.

But it is also slightly different

from a traditional React SPA,

in that, with Next.js, we can always

open a specific URL directly

and this will return a full document,

with the prerendered HTML for that page.

After it has loaded the first page,

it will however use client-side navigation.

And, by the way, this is why our

app loads some JavaScript files

even though all our HTML pages

are prerendered by the server.

The Next.js Router uses JavaScript

to perform client-side navigation.

But, if we prefetch these links,

and clear the requests,

we can now navigate from the initial About page,

to the other routes in our application

without any additional request.

So, we can start from any URL on our website

and, like a Multi-Page Application,

we'll get a full HTML document,

with all the advantages of prerendering.

But then, if we click on any link,

it will use the faster client-side navigation,

like a Single-Page Application.

So with Next.js we basically

get the best of both worlds.

All we need to do is use the

Link component in our code,

instead of the standard HTML anchor element,

and Next.js will take care of the rest.