So we got our hero component here.
It's looking good, hopefully,
and now we also need featured posts for this starting page.
Now, what we'll also need besides featured posts, though,
is a navigation bar at the top
because at the moment we only have one working page
with not too much content on it, arguably,
but later we will have other pages as well,
the All Posts page and the Contact page.
So therefore to be able to reach that,
we wanna add some navigation,
and hence that is something I'll do first
before we then come back to the featured posts.
I wanna add a navigation bar, or to be precise,
I wanna add a general layout because the navigation bar,
which should be shown at the top,
will not only be needed on the homepage.
Instead, we will need it on all pages,
and that can be solved with a layout,
as you'll learn throughout the course.
We can utilize this _app JS file here
to wrap the component which is rendered there
which is actually just the page content
that was loaded for the different URLs
with a general layout.
That is what we can do,
and what we typically wanna do in Next.js applications,
and therefore let's build such a layout component.
For that, in the components folder,
we can create a new subfolder called layout,
and in there, I wanna add a couple
of components that help us create layouts.
The first one will be the layout component itself,
a layout JS file, but then I'll add two other files as well,
since I wanna split my layout
into multiple sub-components.
For example, I want it to have a separate component
that holds the actual navigation bar,
so I'll name this main-navigation.
This will be my navigation component,
and that navigation component should also render
some logo for my blog,
and therefore I'll create a separate logo component,
and of course you can split, and mix, and match,
and compose your components just as you need to.
This is just some example split
which I came up with which works for me.
If it doesn't work for you,
if you wanna split it in a more granular way
or have bigger components,
so less splits, that's of course also fine.
You just need to adjust the styles then.
Now with that, let's start with the layout component.
In there, we can, again, create a function
and export that function, Layout,
and in that function, we then return a fragment
because I wanna have two adjacent JSX elements,
and the first one will be the MainNavigation,
so this separate component
which we'll store in the main-navigation file.
The second JSX element will be the regular main HTML element
in which I wanna output properties,
whoops, props.children,
and for this, of course, we need to make sure
that we accept props here,
props.children, because we will wrap
this Layout component around this component here
in the _app JS file.
We can actually already do that here.
In this file, we can already import Layout from,
and then go up one level,
dive into the components folder,
into the layout folder and the layout file,
and then just wrap component with Layout,
so create Layout here and wrap it around this component.
Now it's this component which will be used as children,
or as a child, inside of the Layout component, so here.
So that's step number one.
Now I'm using the main navigation here,
and hence I also already wanna import MainNavigation
from that main-navigation JavaScript file.
That file, however, is completely empty right now,
and that needs to change therefore.
So if we go to the main-navigation file here,
we, of course, again,
wanna create a MainNavigation function,
and then export that as a default,
as we always do it.
And now inside that MainNavigation component,
I wanna return a header element,
and then there as a first element, my logo,
and side by side to that, a nav bar
with a list of nav items.
So here I'll add a unordered list with my list items
where in the list items, I have my links.
Now, for the links we will not use the standard anchor tag
because that would be handled by the browser only,
and when we click it, we would load a brand-new page
and send a brand-new request.
Instead, we want to use Next's Link component
to take advantage of automatic data prefetching
which it does for us,
and to take advantage of the fact
that we stay in a single-page application
once the page was loaded initially.
So therefore we wanna import Link from next/link,
like this, like we did it many times before in this course,
and to then just output Link here,
so create a link here.
Now the link needs a ref attribute
where we point at /posts, for example,
and load the Posts page,
and it has to be /posts because of our page structure.
We have the posts folder with the index JS file
which should be loaded when we wanna load all posts,
and you learned before in this course that this structure
in the pages folder leads to a /posts route
which is inferred by Next.js,
so we wanna link to that route here.
Now, that's not the only link though.
I also wanna have a link to my Contact page
because we also have this contact JS file,
and that file will be translated
to a /contact route, as you learned,
so we also wanna have a /contact route here.
So now we've got that.
I actually also wanna make the logo clickable
so that when we click the logo
we're taken back to the starting page.
That's a quite common pattern on websites,
and therefore we also wrap the logo with a link, like this,
and give this a ref of just slash
to go back to the starting page.
Now you might remember
that there was this special behavior of Link
when the child you passed to it was not plain text.
If you pass your own component,
or any other HTML content to a link,
Link will not render an anchor tag by default.
It only does that if you just pass plain text to it.
If you pass anything else than plain text,
the link will not render an anchor tag for you,
so in order to get that,
you should then bring your own anchor tag, like this.
You don't need to add ref on that anchor tag.
Link will do that for you.
It will pass the ref set on Link
to the direct child of Link, which is an anchor tag now.
So it will do that for you,
but you have to add the anchor tag element
to tell Link that it should render an anchor tag.
This is not a bug or some inconsistency, but this exists.
This feature exists to make sure
that you can turn any element into a link,
a div, a button, whatever you want,
but here we want an anchor tag still,
so I will add my own anchor tag wrapped around my logo,
and speaking of the logo,
that's, of course, still missing.
I just added this dummy JSX code here,
but we are not importing it,
and the logo JS file is also empty,
and therefore as a next step, we'll work on that,
and we're then also going to add some styling.