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.