Next.js Tutorial - Part 5 | Material-ui Integration + _app and _document

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 <pre>Vehicles List</pre> 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

Channel: Bruno Antunes

Views: 28,818

Keywords: javascript, react, next.js, ReactJS, ReactJS Tutorial, Next.js Tutorial, Nextjs Tutorial, Nextjs for beginners, React next, React Next.js, React nextjs, react next js, react ssr, next ssr, javascript for beginners, next typescript, nextjs typescript, material, material nextjs, next.js material-ui, material-ui, next js material, next js material ui, next.js material-ui integration, next.js _app, next.js _document, @material-ui/core, next material-ui, next js material-ui, css-in-js

Id: k7bKDpw-JGk

Length: 12min 6sec (726 seconds)

Published: Mon Mar 16 2020