We added a new About page to our blog website.
But, if we go to the Home page,
there's actually no way for the user
to navigate to the About page.
So let's go and add a link to our HomePage.
In fact we could have a header,
that wraps a navigation bar.
Now, in a React component we need
a single JSX root element,
so I'm wrapping everything inside a "fragment", which
is this special empty tag.
Inside the "header" we can have a "nav" element,
which in turn contains a list.
And then we can have a list item for
every link in our navigation bar.
Let's start by using a regular "a" tag,
linking to "/about",
and with "About" as the text.
So we have a very basic navigation bar.
We'll add some styles later to make it look nicer,
but we can click the new link, and
this takes us to the About page.
Of course we can also go back using
the browser back button.
That's basic web functionality, but let's look
in more detail at the network requests.
And I'm only interested in documents, that
is HTML files.
Now, when we first load the home page, the browser
will make a request to "localhost".
And this really means the root path,
that is the index page.
When we click the "About" link,
the browser requests the "about" page.
And note that it replaced the entire document: it unloaded the home page,
and loaded the about page.
If we click the back button, the same
thing will happen in reverse.
The browser discarded the about page, and requested
the home page from the server again.
This is how traditional websites work, where
each page is a separate HTML file.
But it's different from a React Single Page
Application, where all the navigation
is done on the client side.
Client-side navigation is actually faster, because
it doesn't load a completely separate HTML file
from the server every time we
navigate to a different page.
So does this mean that by using Next.js we're
losing one of the advantages of React apps?
Of course not. We can use client-side
navigation even in Next.js apps.
All we need to do is use a component
provided by Next.js called "Link",
that we can import from the "next/link" module.
The way this works is that we simply use
Link instead of the anchor element.
It takes the same "href" attribute.
Let's save this file, and see
what difference this makes.
Let's reload the Home page again.
And of course the browser requested
the HTML file for the root path.
But if we go and click the "About" link now,
note how the browser didn't make any new request.
There's still only "localhost", so it
didn't request the "about" page.
That's because the Next Router is
now doing client side navigation.
It already pre-loaded everything required to
display the AboutPage component
when we loaded the Home page.
So it didn't have to make any additional requests,
which means that the navigation
was a lot faster as well.
The same happens if we click the back button:
the Next Router simply replaces the top React
component on the existing page, instead of reloading
the whole document from the server.
So by using Next.js we can basically
have the best of both worlds.
We get very quick client side navigation,
just like a Single Page React app,
but we can also go directly to the "/about" URL and
get a pre-rendered HTML page from the server,
like a traditional multi-page web application.
All we need to do to take advantage of these
features is to use the Next Link component
for all our internal page links.
Now, I want to quickly mention that the
Link component has changed recently.
Until Next.js 12 you had to write an "a" element inside each Link,
like this.
You will see this syntax used in some of the videos
in the rest of the course, because they
were recorded before the change.
But since Next.js 13 the "a'
tag is no longer necessary,
and in fact you'll get an error if you do this.
So please just leave out any "a" tags inside Links in your own code,
and everything will work fine.
The Link component is now effectively
a replacement for the "a" element.2