So, some kind of general layout would be nice.
A general navigation bar, which we have on all our pages
because at the moment we don't have that.
Now for dat,
we can of course dive into all our page components
and start adding some some header at the top.
So above our main content, we could add a header
with a nav bar and so on.
And we could do that
but we would repeat that code for all our page components
in the end, since I wanna have the same navigation bar
in all those components.
And the dat is where dis _app.js file
now becomes important.
This in the end is the root component
where the different page components are rendered in.
This component, which is rendered here
that's your page component in the end next to js
we'll use this _app component to hand your page content
to it to then display it whenever you switch the page.
So that's your page being rendered,
this component.
That means that we of course can wrap this component
with some general layout component.
We could wrap it with a fragment
and add a header on top of it.
And that is exactly what we're now going to do.
For this in the components folder,
I'll add a new sub folder side by side
to event-detail, events, icons, and ui
and I will name it layout.
And in this folder, I'll now add a layout.js file
and a main-header.js file.
Now the layout.js file will be fairly trivial.
It holds a functional component, the layout component
and that component will receive some props.
And of course, we also export this layout component here.
And then here, I just want to return a fragment
which we import from react.
So we import from react.
We import the fragment and then a main HTML element
between which I output props.children.
But then above that also my header
and I'll create that header in a separate file
in the main-header.js file.
In there we add another component, the main-header component
which we also export as a default here.
And then in here in this main-header component
we return our header coat.
So here we'll have a header wrapper HTML element.
And then in there a div, which holds our logo,
our logo text in this case
since we'll not have any image logo in this application
and next to that logo we'll then have a nav bar
with our navigation items.
But let's start with the logo that will be fairly trivial,
I'll make it clickable by adding a link here.
And hence, we need to import link from next/link
and I'll say, NextEvents here, that's my logo text.
And it should be clickable
and always take us back to the starting page.
Hence ref here is just /nothing,
slash nothing so dat when we click the logo
we're taken back to the starting page.
Now in the nav part here, I'll add an unordered list
of all the navigation items
though here it'll only be one nav item, which also is a link
because it all does should be clickable.
And here I'll say All Events
because this should take me to the All Events page.
Or we say Browse All Events
and therefore here ref is /events to take us
to this events page.
Now some styling would be nice and therefore, again,
attached you'll find a CSS file.
You'll find the main-header.module.css file attached
which contains some styles for this main-header component.
And hence we should import
classes from
./main-header.module.css here
and assign these classes to the HTML code.
On the header element for example,
you should assign a class of .header,
So classes.header on that div with the logo
it's classes.logo.
On the nav,
it's
classes.navigation
and that's it.
These are the three classes which are added here.
With dat we prepared the main-header component.
And now in the layout component,
we can add the main-header here
above
our main
HTML
element.
So for this, we need to import main-header
and then render it here.
And now we just wanna wrap our overall layout
around all the page content.
And that is exactly what we can do
with this _app.js file.
We simply wrap this component
which is our page content with,
layout.
So with our own layout component like this
and for dis of course,
you should make sure that you import layout
this layout component which we just worked on.
And we can wrap layout around that
because in layout we do pass props.children.
So the content between the opening
and closing layout tags on to this main HTML element.
So we render it between those main tasks.
And hence, now if you save all files
you should see this navigation bar at the top.
And if I click on NextEvents
I'm taken back to the starting page.
If I click on browse, All Events,
I'm taken to the All Events page
where we haven't added any content yet.
And therefore dats the next step,
let's work on this All Events page now.