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.