We have a simple navigation bar, with a few links.
And by the way, I'm running the dev server again,
not the production one.
As we've seen, we should use
the Next.js Link component
whenever we point to another
page inside our application.
That's not necessary for external links of course,
because client-side navigation
only works within our app.
For example, in our reviews website
we're going to use some data
downloaded from the RAWG video games database.
RAWG provides an API that's free "for
personal and hobby projects".
All they ask for is a backlink from
"pages where the data is used".
Now, we won't actually call this
API directly from our app,
but I will provide you with
some images and other data
that I downloaded using their API.
So, it's only fair to put a link to "rawg.io"
maybe in the footer of our website.
So we have something to display in the footer.
Let's say "game data and images"
"courtesy of"
and then put a link to "rawg.io".
Since this is an external link,
we can use a regular anchor element.
There's no need to use the Next.js Link component.
In fact, we may want this link
to open in a new window,
by setting "target" to "_blank".
And this is the footer.
It could do with some styling,
but we'll take care of that in the next section.
The link will obviously open the RAWG website,
in a separate tab.
Now, we know that in our RootLayout
we have elements,
like header and footer, that
are common to all pages.
But it's important to also understand that
the layout component is not just a convenient
way to share common elements across pages.
It also affects how the pages are rendered,
especially when navigating
from one route to another.
We can see that if we inspect the
Elements using the DevTools.
The layout component provides the basic structure,
including the header and the footer.
While the content for each specific page
is rendered inside the "main" element.
Now, let's pay attention to
how the elements change
when we navigate to a different page.
When I click "Reviews", you can
see that some elements flash,
meaning they were updated.
If you noticed, "header" and
"footer" didn't change.
Inside the "body", only the
"main" element was updated.
Let's try this again, with the About link.
I'll freeze the screenshot
while editing the video,
so you can clearly see that the
"main" tag is highlighted,
because the "h1" and "p" elements
inside it have been replaced.
You may notice that the "head"
element also changed,
but we'll talk about that in
the section on "Metadata".
The point is that, when navigating
to a different route,
Next.js only re-renders the
page-specific elements,
not the layout elements.
The layout stays exactly as it is.
This is faster and more efficient
than re-rendering everything.
It also means that the user can still
interact with the layout elements,
even while a page transition is in progress.
So, you may want to keep this in mind
when deciding whether to put
some elements in a layout,
or in some other shared component that
you then include into each page.
If possible, it's better to keep
them in a layout component.