We are going to use bootstrap CSX for styling this project.
So in this video we're going to focus on installing bootstrap and then wiring it up to our project bootstrap
is a global CSX file.
In other words it contains some CSX that is meant to be applied to our entire application and all the
different pages inside of it.
The little CSX files have to be wired up to next to us in a very particular fashion.
So the code we're about we're about to write is going to look just a little bit strange but trust me
is the way that we are supposed to do it with Next j us.
So let's get to it.
I'm going to find that Pages directory inside there.
I'm going to make a new file called underscore app dot J.S..
It's very critical that you named this file identical.
Make sure you have underscore at DOT J.S. at the very top.
We are going to import bootstraps USS so to write out imports bootstrap dissed USS bootstrap dot CSX.
Now we have not installed bootstrap as an empty module just yet.
And this line right here is assuming that we have.
So we are going to go back over to our terminal in just a little bit and install bootstrap until we
do this right here.
This airport is not going to work correctly after that.
Inside this file we're gonna start to write out a little bit a strange code.
Let's just write it out and I'll tell you what it is doing.
So we're gonna write out expert defaults.
We're going to export a react component.
This component is going to receive a props object that has two properties inside of it that we care
about inside of here.
So I can do a little bit of dy structuring and pull out component and Page props.
Now as usual it is critical that you capitalize the C on component and have identical spelling and capitalization
on page props as well.
We are then going to return component and spread over page props.
So what's going on right here.
Well behind the scenes whenever you try to navigate to some distinct page with next J us next is going
to import your component from one these different files in our case either index out J us or banana
j ust next does not just take your component and show it on the screen.
However instead it wraps it up inside of its own custom default component then that is referred to inside
next to us as the app what we've done here by defining this underscore Abdul J.S. vile is we have defined
our own custom app component so whenever we try to visit our banana root inside the browser or our root
route which would show our index not a US component next to us is going to import that given component
and it's going to pass it into this app component right here as this component prop so compound right
there is going to be equal to either our banana component or the index component and then page props
are gonna be the set of components that we had been intending to pass to either banana or index.
So long story short this thing is kind of like a thin wrapper around the component that we're trying
to show on the screen.
Why do we have to define this at all.
Well if we ever want to include some global sea in our project which bootstrap is we can only import
global sea assets into this app file.
It turns out that as we start to try to visit some other components or other pages like let's say we
go to banana J.S. or the banana roots if we go to banana next is not going to load up or even pass that
index file.
So any CSF we had imported inside there would be not included inside of our final a nail file.
So if we have any global sea assets that must be included on every single page it has to be imported
into this app file because this is the only file that we are guaranteed to load up every single time
a user comes to our application.
OK so let's say this and then remember this is not going to work correctly until we actually install
bootstrap CFS.
So let's go over to our terminal and install it right now.
I'm going to go into my client directory and I'll run npm install bootstrap
and there we go.
Now when we install bootstrap remember we are adding something to our package not JS on file scaffold
does not sync changes to that package not just on file.
Instead anytime scaffold detects a change to it it's going to attempt to rebuild the image.
So if you now go back over to your window that is running scaffold.
Chances are you're going to see next to us trying to rebuild your client image.
It looks like minded.
So right here now we should in theory be able to go back over to our browser reload the page and see
bootstraps.
Yes that's kicking it.
So if I refresh the page I will notice now that landing page right here is a distinctly different font
than what it was before.
So that means that bootstrap is has been successfully loaded up.
By the way if you want to read more about this CSX global thing and why it exists you can take a look
at this you your l right here.
I'm not going to list the whole thing out but if you want to feel free to pause the video and we'll
give you a little bit more of a definition or explanation of why we had to do this inside this app file
and you can also take a look at some documentation around that custom app component as well.
All right.
So it looks good.
Let's take a quick pause right here when we continue the next video we're gonna start putting together
our sign up and sign forms.