All language subtitles for 010 Adding a General Layout Wrapper Component_Downloadly.ir_en

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.