hello YouTube. First I need to say a big thank you all for the support you gave
me both on Reddit and Facebook during the last video. It was really nice to
see how a lot of you asked me two specific questions: The first one how to
set up material UI with Next.js project. The second question how to
have authentication in a Next.js project using middleware. The next
video I will focus in the authentication using middleware in Next.js also for the API
routes and pages. In this video I will focus our attention on how to set up correctly
material-ui with next.js. If you don't know material-UI uses
behind the scenes a version of JSS which is a CSS in JS library and for
that reason we will be extending the _document and _app in next.js in order
for us to use material.js The first step is to npm install @material-ui/core
While this is installing (because it will take a while)
we can go to pages and create a new file called vehicle.js.
We will consume the api we built last week at API/vehicles which will
return all the vehicles we have in our SQL database and then over here in
vehicles.js we will just have a material-ui table where we will
show those vehicles. So let's start by export default function vehicles okay
and let's say that we are exporting something like Vehicles List
now that we save that one we can open our browser and go to localhost /
vehicles and we should have ello vehicles list if you didn't watch the
video from last week the API at the moment is returning these three vehicles
with a brand model and owner ID so I can even start by copy this URL going back
to our component and hover here I can do vehicles dot get initial props equals
two and synchronous function okay and inside
every synchronous function we can have a wait fetch and bad URL so we are
grabbing everything from our API now in order to get the JSON file I can do
respite Jason and because Jason is returning a promise I need to say a wait
over here and now we can return list as the jason okay so now we can go to our
vehicles and say that we are receiving one of the properties is list okay
so let's just do this json stringify list no and let's say for spaces saving
them and going to our browser once again we should now have literally this JSON
but in our page because we already got it
right so there we go we have our JSON already the next step we need to do is
to go to material UI for example and grab one of the table examples and it
will be much easier if we just copy paste it so over here we can click it
will show the source code so we can just copy the import and after the imports I
will also copy oops after the imports I will also copy our
our table itself okay so let me now copy the table itself okay and copy this
table copy and we can just remove everything we have over here and say
control V so now we pasted all this table right the next step is to start to
change those variables or those names of the other sorry not variables the names
of the others and the first one is IB the second one is brand the third one is
model and the last one is owner ID so let me do owner IV we can remove this
last one because we are not using it and now we have list okay and we have list
dot ID ID over here the next one will be the
and the model and the other IV right I think I didn't make any mistake but if I
did we will know in a second so going back to our page now refreshing we
already have a material UI table right so now we are in the position where most
of you were sending me messages asking why when i refresh this table what I
receive from the server is not exactly what I'm expecting I'm expecting to see
for example the CSS already applied to this one over here and even worse when I
start to have a lot of elements on my screen my JavaScript takes a bit longer
to load and so I will see that flickering off-screen so otherwise of
that Bruno and yeah it's a weird thing but we we have a solution for that if
you go to the next J's documentation we can just search for document next J s
and op filiz already this first one and yes it is this first one if you search
for CSS inJS okay in the document so the underscore document file we can have a
render page that we literally extend or we just do something on top of that and
it will look something like this okay and in this step we can literally
grab all the CSS that has been generated in our material UI components and then
inject that in the header luckily we don't need to worry too much about it
because the next.js repo... so if we go to github.com/zeit/next.js
already provides probably one of the best examples folder I ever saw anything
you may need for example you need out to set up style components for example it's
here you need examples with Redux you have 11 examples with Redux in our case
the example we care about is the material UI 1 okay
and this one will redirect us to the material UI repo itself and so we click
over there and the only three files that we will care about are the app the
document and theme itself but for now let's start by
copying the document yes we can just literally copy without cutting too much
what's going on over there for now okay let's say new document document.js
yes okay we can do a ctrl V we can also copy the app.js so let's come to
pages click on fjs we can copy/paste this one completely okay and go back to
our vs code and say underscore app dot J yes ctrl V okay and the last bit we need
to copy because we are referencing it over here this theme
okay we need to copy
that file let's just change the location of those okay just to be on the same
level to be easier for us even though it will create a new route but let's ignore
it for now okay so if we go to next yes we go to
source and now we have that theme over here so we can just copy place this one
okay copy paste add one go to pages new theme.js we can just paste that
one and let's just change the background from the normal grade to something ugly
like red for example okay we just need to kill this next J's server just to
make sure that we will get everything again okay so it seems like it's working
now we can go to our browser where was our window is the first one okay we can
refresh this window and it will probably take a while so while that thing is
loading we can also check the custom app dot j s or dot tsx if you are using
typescript and the big difference between document and app is that
document you have access to everything in your HTML so you can even go to the
body and change the body class to be ello world for example in the app itself
so this one we have on the screen the custom app you don't have access to
anything outside your react Dom tree so or your reactor e not on three
your reactor II so this component represents the main inside document so
if we go to document okay you have a component called main okay
and this mine will be literally what you have inside app okay if you want to have
react context for your HTTP call or react context for any other library for
example the ThemeProvider in terms of material UI the place you should put it
is in the app dot TSX okay your app dot G is so that's the big difference
between the two okay also on top of that if we check this document as I showed to
you before if you are using a CSS in J's library most probably you need to edit
this document file okay so why did this thing filed now let's just check and is
saying that it was not able to solve Tim and it's absolutely right because we put
Tim as in the parent folder and actually is in the exact same folder so we can
just delete that and now if we go to our browser everything should be just
working as expected hopefully okay and now it's complaining
that fetch is not there and it's absolutely right as well okay I don't
even know how it worked before but in order for us to use fetch we should be
able to import fetch from oops from is the morphic and fetch and this is what's
recommended inside the next is documentation to use is a morphic and
fetch in order to a fetch both in your client side and your server side you can
use any other library that provides to you fetch you can even use axis or
super-agent whatever you want actually okay so going back here you can see that
we already have the background red and better than that is if we click on these
vehicles now you can see that from our next year server we already received the
page as you may expect that page to be received to you okay so you will no
longer see those flicker screens when you have 1020 components in
your page you will always see the screen as is so no flickering what you receive
from your server is exactly what you are getting
ok so I hope this answered the questions that I received from you this week I was
able to help some of you but not all of you so I think this here helps a lot of
you if this was helpful to you I hope you give the like to the video if it was
not helpful to you and you already knew how to do it well I'm sorry but next
week I think it will be also an interesting video where we are going to
play around with the next year's middlewares and it's something that
people also asked a lot and a lot of people also asked how to do
authentication and you can do authentication using the middleware so I
will probably touch also a bit on authentication and authentication next
week so I really hope everything is well with you and the ones you love see you
next week bye bye