All language subtitles for 017 The __app.js_ File & Layout Wrapper_en

Now I did prepare some components here

in the layout folder

in the Components folder that give our pages,

a general layout and also a main navigation bar

which holds some links, some list items with links.

We just need to use that.

Now this layout component is built such

that we can wrap it around other components

so that we can wrap it around our content

that should be framed by that layout

because layout, this component uses props children

to take what's between the opening and closing layout text

and wrap this component around that content.

That means that we can, for example,

go to the starting page,

so in NextJS and the Pages folder,

and we can wrap meetup list with layout.

Now for this, we also need to import layout, of course.

So we import layout from going up,

components, layout, layout.

We can add this import,

and once this import was added

we can wrap layout around meetup lists like this.

And if we do that and save this, we get an error

that link is not defined.

Now we get this error because

in that main navigation component,

I'm using the link component

but I'm not importing it deliberately

because I wanted to do this together with you again.

We learned about this link component

and we import it from next/link.

And that allows us to create those links.

However, the two prop then should be changed

to ref because the link component offered

by NextJS wants this ref prop

where we define the destination of that link.

But with that changed and with that link import added,

if we now save everything and reload,

we got this nice navigation bar at the top here

and we've got a white border around that

for that go into your global styles

and here in body, set margin to zero.

That's something I forgot for the starting project.

But if we add margin zero to body in the global CSS file

then this white border is gone,

and now we got this frame here

and now we can also click all meetups to go

to this starting page and click add new meetup

to go to this page.

On this page, we are, of course

still missing the layout though.

We only have it on the starting page.

Now we want to have it on this new meetup page as well,

and therefore, of course,

we can always wrap layout around our content

on the new meetup page to add the layout here as well.

But you will probably see that, this becomes cumbersome,

the more pages our application has.

If we have an application with dozens

or maybe hundreds of pages wrapping our general layout

around all the page contents,

so going into all the page components to then wrap layout

around the content that becomes cumbersome,

and that's now where this _app.js file becomes important.

This is a special file, which exists

in this Pages folder out of the box

at which you could create on your own as well

if it doesn't exist in which should contain content

like this.

This is kind of your route component.

This MyApp component, which is defined in there,

and that is just a regular react component in the end.

This special component acts as the root component

NextJS will render.

It receives props and uses object de-structuring here

to pull information out of the props

and the information it pulls out there,

is a component prop and a page prop.

These props are passed into this

MyApp component automatically by NextJS,

since NextJS is the thing using that specific component.

and component is a prop that holds the actual page

contents that should be rendered.

So it will be different

whenever we switch a page and page props are specific props

our pages might be getting,

and at the moment our pages are not getting

any props at all,

because at the moment we have no source

that would provide such props

but that is something we're going to change.

But with that, we now know that component here

in this _app.js file will in the end

be the actual page content of our different pages.

And it will change whenever we navigate

from page A to page B.

Now, since that's the case,

we can utilize this _app.js file

and simply wrap this component here

with our layout or with whichever wrapper you have.

And we then don't have to do it

inside of our different page files.

So we can remove the layout wrapper

from index.js here from our homepage,

we can remove that and go back

to just returning the meetup list

and remove the layout import here

and instead go to _app.js,

and then here, we import layout

from going up one level diving into components,

layout and then pointing at the layout file.

And we now wrap this component here

with the layout component.

And that means that our different page contents

will be wrapped with this layout component.

And hence, if we now save all files

with all those changes, now on the new meetup page,

we also got this layout applied.

We got the navigation bar,

we got the extra styling, which ensures

that the page content does not take the entire width.

And hence now on all the pages,

we got this layout and we don't need to wrap it

around the different page contents inside

of the different page files.

And of course that therefore is the way,

more maintainable and convenient approach

of applying general components to our application.

So whenever you have some component

or some setting that affects all your pages

you can utilize this _app.js file to easily add

that without diving into dozens of files individually.