We added a navigation link
to our blog app
so we can go from the Home page
to the About page.
But once we get here
there are no links to navigate elsewhere.
We probably want the navigation bar
to be displayed on the About page as well.
We could simply copy
this nav block into the other page,
but to make it more reusable
let's put it into its own component.
So let's create a new file,
let's call it "NavBar.js".
This will be a regular
React component.
And in its body we can return
the same elements we copied from our HomePage.
We also need to make sure to import
the Link component
and I'll use the auto-import feature
provided by Visual Studio Code.
So it automatically added
the correct import line at the top.
And finally we want to export
this NavBar as the default.
Ok, we can save this file.
And now, in our HomePage
we can import that NavBar component
from the file we just created.
At this point we can use it
to replace this block of code
with our new component.
Let's save these changes,
and go back to our Home page.
It's still showing
the About link at the top
that we can click to go to the other page.
So the NavBar component is working.
But we're still not showing any links
in this About page.
Let's go and add the NavBar
to the AboutPage as well.
We can wrap everything in a fragment first,
so we can have multiple elements inside.
And here we can add a "header"
with our NavBar component,
that I'll auto-import.
And that should be it.
We can see the NavBar at the top.
However the only link is
to the About page itself,
so that's not particularly useful.
We want to add another link
to our NavBar.
Let's copy this list item
and duplicate it.
Then we can change the "href" to "/"
and the text to "Home".
And we now have a link
to the Home page as well.
So we can click Home,
and navigate back and forth
between our two pages.
So that's all working fine.
But there's actually a small problem
with this NavBar at the moment.
I have created this component
in the same folder as our pages.
Can you think why this may be a problem?
We've seen a couple of videos ago
that Next.js uses a filesystem-based router,
where all the files under the "pages" folder
are automatically exposed as web pages.
This means that right now
we could open the "/NavBar" URL
and we can see our "NavBar" component
displayed as a full page.
That's obviously not what we want,
because the NavBar is not meant to be
a standalone page.
It's just a reusable component
that we want to include in our pages.
So how do we stop this NavBar component
from being exposed as a web page?
As you might guess,
we need to move it somewhere else,
outside of the "pages" folder.
A common approach is to create
a "components" folder
at the top of our project.
So we can now move "NavBar.js"
inside that separate "components' folder.
Let's confirm.
Visual Studio Code can
automatically update the imports in our code,
so let's accept.
And we should see that, in "index.js"
the "NavBar" is now being imported
from inside our "components" folder.
But we still need to save this file ourselves,
because the editor updated the import
but didn't actually save the change.
That's why the page in the browser
is showing an error.
If we save the AboutPage as well,
that should fix it.
And it's now importing the NavBar
from inside the "components" folder.
We can quickly check that
everything still works.
Good. So that's it for this video.
We've seen how we can create
reusable components in our app
just like in any other React app.
The only thing we need to be careful about
with Next.js
is that we should not put our components
inside the "pages" folder,
unless we want them to be visible
directly as web pages.