Next.js 11 setup with Material UI Version 5 | Part 1 - Emotion

two of our favorite libraries next gs and material ui have both kind of gone through an evolution into their next phases in next eleven and material ui version five and in order to integrate those two libraries it's kind of changed it a little bit since the last time we've looked into it so i wanted to kind of make a tutorial in order to kind of go over how to do that for both emotion and styled components so let's code it up [Music] all right so first thing that we're going to do is we're going to go ahead and copy down my starter project that i've created for this and they're going to open up the terminal and we're just going to clone it down so that we can all kind of get started on the same page and what this project is is pretty much just a simple little uh next.js project with some eslint and prettier configurations already set up and once we've got that project opened up what we're gonna first do is we're gonna actually go ahead and check out the starter branch which is just gonna be kind of like the starter project template for this tutorial and you guys can do the same as well but let's kind of quickly go over and see just a couple of little things that we're doing in this project um just to give you guys a little bit of a better idea of what this starter project is so um just some typical eslint configurations one thing that you'll notice it's a little bit cleaner than the usual ones that i have and the nice thing is that next actually in next 11 they now provide you with some eslint options themselves so two of them are the next core web vitals or you could also just do next like this um the core web vitals is a kind of more strict rule set so i kind of like to just leave that as my um the extension configuration that i'll be using with next js projects we're also going to be adding the typescript eslint recommended configuration rule set and as well we're going to be using prettier and one thing to know is that you always got to make sure that prettier is the last thing that you add on your extends list so let's go to their documentation here and if uh let's see can you guys see that let's zoom in a little bit okay so there we go so emotion pretty much is just a library designed to allow you to write css styles with uh javascript so it's pretty cool provides powerful predictable style composition in addition to just making life easier so as you can see here it gives you some examples and i'll put a link to this documentation as well for you guys um and there's just different ways that you can kind of work with this it's very similar to style components so it's kind of just preference whether you want to use emotion or style components and so first thing i kind of want to do with this tutorial is i kind of want to go over what emotion is um because when i was kind of looking at the changes for material ui version 5 i had really no idea how to use emotion or styles components so i kind of want to give an introduction of what emotion is so that later on when we actually use it with material ui you can kind of understand uh what's going on and what the changes are between version 4 and version 5. but let's go ahead and actually start doing something with this library so that we can kind of get a better idea of how to work with it so what i'm going to do is i'm going to go ahead and add the uh emotion react library since we are going to be using this with react and um for other projects that maybe you aren't using react um they do have kind of like a base uh library that you are able to download but since we're going to be using this with nexjs let's just download the react version and it um let's then go ahead and actually create our first uh component so what we're going to do is we're going to go into our source folder and we're going to create a components folder and we're also then going to create a emotion button.tsx and within this file what we're going to do is we're going to copy this kind of this pretty simple button style configuration here and the reason that i wanted to do this is because i wanted to show you guys how it works with typescript and as you can see i kind of messed up this typing here and as you can see typescript actually is able to pick that up and it kind of of course we have all of this uh mumbo jumbo usually that typescript errors kind of give us but if you kind of go down here you can see that type border box is not assignable to type so it kind of just tells us that like hey there might be something wrong with this specific property box sizing so that's just kind of cool helps save some uh kind of just lets you kind of catch errors before you kind of go ahead and do anything with them but let's go ahead and get rid of that and actually install another library and this library is we're going to first go ahead and actually add eslint support for emotion and so that library is just a dev dependency oh where did it go yeah so just a dev dependency called emotion es lamp plugin and then all we got to do after that is go back to our uh eslintrc.json file here and actually change it up just a little bit to actually include that plugin and a new set of rules and let's kind of go over what each one of these rules means so the jsx import pretty much just ensures that the jsx pragma is always initialized in kind of in a motion component so it's kind of easier to show you guys later on when we do actually go through this emotion button um the no vanilla import pretty much just errors out if an import from the emotion package is not recommended um so you pretty much just since we're using emotion react we actually want to error out on this one meaning that we're not using the vanilla based library for emotion um the next one is import from emotion and this one pretty much just errors if anything other than style is imported from react emotion so for example it would error if we do something like import css from react emotion so pretty much that would error out the correct way to do it is import um css from emotion so that's this is the correct way here this would be the incorrect way so that would just kind of error out for us and same with the styled import it pretty much just ensures that style is always imported from emotion at styled so for example an error would be if you import styled from uh react emotion and then the correct way would be import style from at emotion style so that's just pretty much what these eslint rules are doing and they're just kind of throwing errors making sure that we're kind of following best practices for uh the emotion plug-in and then the next kind of little setup that we're going to do for emotion is we're going to actually create a custom babel configuration for our next js file in a dot babble rc and uh pretty much all then we got to do is make sure oh what's going on here um there we go so that we just have to include the next babel preset but then we also are going to include a babble plug-in that emotion kind of provides us and it's pretty much just a optional plug-in that kind of just helps optimize styles um and creates just a better developer experience overall so we're going to add that to our next.js application so let's just go ahead and add that plug-in just by doing a yarn add dev uh emotion babble plug-in and then once we've added that pretty much all we then got to do according to the documentation is add this plugin at emotion so we're going to just go ahead and take that and we're going to add that to right here and one thing to know is that in their documentation it kind of says that at emotion must be the first plugin within your babble uh configuration and just as a quick side note this is kind of the some of the uh features that kind of come with that babble plug-in so we got minification dead code elimination source maps and components as selectors so kind of just really helps out when using this library with uh react so now that we're kind of finished configuring our application to use a motion let's actually go ahead and start implementing some components to kind of get a better idea of how to actually how it actually works so let's go back to our code here and what i'm going to do is i'm actually going to go ahead and paste this emotion button code and kind of discuss what's going on here so one of the pretty interesting things is that you have this at jsx directive that you kind of import from emotion react and the cool thing is if i go ahead and erase that and go ahead and do my auto fix you can see that it automatically adds that and the reason for that is because we added this emotion jsx import error out and prettier and this plugin will actually know to go ahead and actually import that once if it's if it notices that it's missing and it kind of is uh required to be a motion um component and you may be asking is this something that's actually required and if i go ahead and remove that and let's actually go ahead and comment out this rule from eslint and just save that one thing you'll notice is that now this css kind of um what's it called the css property no longer really exists within this component because it doesn't realize that this is now a emotion jsx component and so the the usual kind of create elements won't actually have a css property like that so if we go ahead and re-add that back now you can see that everything is okay so let's also go back to our eslint and add that rule back and let's kind of discuss what is happening here so pretty much what we're doing is we're defining an emotion button component and within this button we're going to just make it a functional component and you can see now it's just pretty much just a div and within this div it has this css property that then we're defining some rules so we're defining padding uh background color font size and kind of like all of these css properties but we're actually doing that within the code so that's the kind of like write css in javascript uh mentality from emotion and style components and then let's actually go ahead and test out that this how this is working so what i'm gonna do is i started up our application using just yarn dev to start up our uh next js application and then what we're also going to do is we're going to go to our index page and within this index page we're kind of just going to go ahead and let me kind of put this down and in the main part here we're just going to import that emotion button and then just kind of have it display on the index page and then once we can do that is we can actually go back here and uh one thing you'll notice is that pragma and pragma frag cannot be set when runtime is automatic and this is actually expected and the reason for that is because we are using react 17 and react 17 introduced a new version of jsx that now has two runtimes so now you have the classic runtimes as well as the automatic runtime and when you are using the automatic runtime which we are with the react 17 we actually get this error that we cannot set the pragma flag and we can see here if we look at this github article a little bit or this kind of issue here is that it's not necessarily a next gesture a theme ui issue react 17 introduced a new version of jsx which has two runtime options now and so the old jsx transform jsx into a create element and then the new one is doing uh some kind of like special importing and things like that and the kind of temporary fix for this is to actually just include another kind of pragma up here and we're just going to add that to our code here so all we got to go back now is we go to our emotion button and then instead of having it like right here all we got to do is just add a jsx runtime classic and there's some weird stuff going on with the um file here so i just actually need to close this out so there we go so if i close that out now you can see the jsx runtime classic is there and if i go back to our local host page you can see now that our thing is working here and the reason why the hover wasn't actually working is because i had some uh quotes right here so i just went ahead and removed that so now you can see that this uh emotion component is rendering correctly and as you can see it's kind of a little bit ugly to have like your css kind of uh written like this and it kind of just you have a lot of stuff going on within your actual component so one of the cool things that you can do is you can actually define this uh css outside of it in something similar to this button style so what we can do is we can actually just copy uh this the css from this css right here and just kind of do the same thing but out here so we're going to call the css function and we're going to pass along the cs test that we're actually going to use for this button style and then what we can do is instead of actually having it written out here what we can then do is just button style like that and as you can see our component becomes a lot cleaner and um just easier to kind of read right now it's uh we know i know that i named this as an emotion button but it's not really doing anything as a button it's kind of just uh acting as if it looked like a button but um yeah but as you can see and if we refresh the page it pretty much just has the same uh functionality as before and that's cool and all but there's actually another way that i prefer how to use emotion the emotion library and that's actually using the kind of like let me close this out and it's usually the styled api and in order for us to kind of use the styled api which is very similar to style components what we can do is we can actually add another library called emotion slash style and that'll give us access to um that style.div style that uh a lot of people see with style components and emotion components and i actually prefer it as well so then after that what we're going to do is let me just restart our application here so that once after we've make these changes we can go and quickly see how it also works the same and i'm going to leave this emotion button um here just to kind of show how to do it with the css property but i'm going to then go ahead and actually create another component and then i'm just going to call this one it styled emotion button.tsx and then go ahead and copy that down here and you can see that this is also a lot cleaner a lot easier to read and also one of the cool things about doing it through the styled api is that you don't have to worry about this kind of annoying little jsx pragma and things like that with your emotion components you just have to import styled and then we're also going to make this a function component and then we're doing something very similar and instead of using the css function and passing in our css what you can actually do is you can do a style and then pass it a kind of the type of component that your kind of style here so for example we're going to be styling it as a button and then we're going to just pass it along all of the css properties so we're going to make it the padding the hot pink font size pretty much all similar to the last uh emotion button that we created and then what the cool thing then is instead of returning a div as we were doing here so div css all of that well then we can do is we can actually use this uh kind of this component here and just return that so like if i were to go ahead and change this to styled button and then let's just change that down here you can see that's kind of what's going on and so uh what i'm gonna do now is i'm gonna go back to our index page and then instead of the emotion button what i'm going to do is let's actually get the styled emotion button and import that and then let's navigate back to our um index page here to our localhost 3000 and as as you can see now we have this uh button component that's actually defined uh using that styled api and the last quick thing i want to touch upon on how to use emotion is that you can also add props to your emotion styled and you can actually pass these in so like similar to how we usually do it with material ui so what you can do is you can define a type or an interface here and then just add the variables that you want to have access to your props and then what you can then do is when you call this styled button you can actually pass this along so that then when you kind of add this little syntax of props you then have access to that specific property that you can then set on your uh new emotion component so i just wanted to quickly show you guys how to do that pretty cool stuff and the reason that i wanted to show you guys how to use or like what the emotion library really is is because material ui5 changes the way that you actually install the library and how it uses its components and the reason for that is as you can see here when we go through the installation of version 5 you can see now that we do a yarn ad the mui material library but then you also have to go ahead and actually add those two emotion libraries that we did the emotion react and the emotion styled and the reason for that is because it uses those as its new styling engine for its uh material ui components so i kind of wanted to give you guys an understanding of what those are so that when you see that we actually are adding those two libraries you know what's kind of going on and so let's go ahead and go back to our code here and let's add some dependencies for the new material ui version five and these dependencies are we're going to add the mui uh material library we're also going to add the icons library for version five and then we're also going to add the emotion server library which we're then going to use for next js in order to be able to server side render these emotion components so let's go ahead and add those and once those are added you can see now in our dependencies we have those new libraries the server library as well as the two necessary material ui libraries and then one thing we're going to do first is we're actually going to have to create a emotion cache for our server-side rendered emotion um components and the way that we do that is actually we're gonna go into source and we're going to create a new folder called lib and within this folder we're going to create a create emotion cash uh dot ts and we're just pretty much just gonna paste that right here and so pretty much all this is doing is we're importing the create cache from the emotion cache library and it's just a function that we're then just gonna return the create cache with the key of css and we're just going to export it and once we've done that we can actually go ahead and also create another thing that we're kind of familiar with if you've watched my other material ui tutorial and we're going to actually go ahead and create that material ui theme that we're going to be using throughout our application so within styles let's go ahead and just create a theme.ts and here we're just going to create a super simple theme so we're going to just import the create theme from the mewy material styles library as well as the color red from the colors and pretty much we're just going to define a palette that we're going to have the main be this color as well secondary be this color and then the error have that be a very specific uh type from the red uh library awesome and um if you're familiar again with my other tutorials you'll know that in order to get a material ui to kind of server side render consistently with next.gs you actually have to go ahead and define a custom document page that kind of helps it figure out so that you don't get like a flickering uh effect with your uh server-side rendered components and what we're gonna do is we uh do that by pretty much just creating this underscore document.tsx file within our pages and then we're going to go through and kind of define a couple of things and let's go over what's really happening in this file so again it's it's very similar to how we did it in my last tutorial but we're just going to import a couple of things and we're just going to render so this is pretty much all the same you can see here that we have the theme color and then we're also importing the roboto font which is kind of uh used with uh the material ui and then we're also importing the font google api so this is for the material icon so make sure that these two links are included in the part of the head of your document and then down here again we're just going to do this my document.getinitialprops which pretty much just uh helps the figure out when to render what for the next.js application and then here we're kind of going to start using a little bit more uh emotion specific things so right now we are going to create a cache and that is going to be used for our emotion cache and as you can see you can consider sharing the same emotion cache between all of your server side render requests to speed up performance but for now we're just gonna um just leave it like that just because it seems like there might be some side effects and i personally haven't really gone through and done that so i'm not exactly sure how that works and then once we have access to that emotion cache we're going to kind of just extract some critical to chunks and then we're going to render the page with the original render page but as you can see here now we're passing the app with this emotion cache that we are uh defining and then we're also kind of setting up some initial properties some emotion styles some emotion style tags things like that then we also have this style tag here that we're going to dangerously set the inner html with some keys and some data dash emotion so i got this all from next js uh material y examples would actually has a typescript and so um i'll put a link to that uh github repo down uh in the description below as well and then we're just gonna return a couple of things very similar to how we did it in my last tutorial and then with that we can actually go ahead and update our application our custom application to actually use these new material ui themes and things like that so pretty much what we're doing here is we're just going to import a couple of stuff so we're going to import our theme we're going to import the create emotion cache so again we have we kind of handle it on the server side but we also kind of have to create this client-side cache that will be shared throughout the whole session for the user in the browser so we go ahead and initiate that we kind of defined this interface for our app props that we're kind of going to extend the app props and app props is just kind of things like the component the router um other kind of things that we use in our custom application and we're going to add in a motion cache in case you want to include that and then down here you can see we destructure those so we get the component the emotion cache um that's equal to this client side emotion cache and then the page props and then we go ahead and actually wrap our entire application in this cache provider we define our head for this viewport this is just for scaling you can actually probably add this as well to the document page but let's just leave that here and then you have the theme provider that we've done again so this will just let our application know that we're going to be using material ui and the theme that we define before this is going to be the theme that we're going to use throughout our application um we actually set uh css baseline here as well which again it just pretty much just kind of kickstarts an elegant kind of like beginning uh initial uh baseline for your css and then we define our component our application that's going to be our the entire next.js application and in the last part i kind of said that you could probably add the viewport to the underscore document page but that's actually something that you don't want to do because it could lead to unexpected results um that just the viewport won't be handled correctly in that custom document page so that is why you have to it's better to actually import this viewport scaling meta tag within the underscore app component and so let's actually go ahead and test out that this is working correctly so what we're going to do is we're just going to start up our next js application and what i'm going to do is i'm going to create a new page and this page i'm just going to call um let me create that again ssr page.tsx so it's going to just be a server-side rendered page and what i'm going to do here is going to be pretty simple i'm just going to import button typography the get server uh side props context functional component as well as the style the emotion button that we defined right here so i'm just going to be importing that to our page so let's close all of these so it makes it a little bit easier to find stuff where is okay so the server side render page and then i'm going to just render a couple of material ui components i'm going to be uh rendering the typography like welcome to the server i'm going to be rendering a button as well as the custom emotion button that we defined and then i'm just going to make sure that this is server side rendered by kind of exporting get server-side props meaning like hey sir this is going to be a server-side rendered page and so now if we go back to our localhost and if i go to localhost 3000 ssr page um you could see now that this should actually go ahead and render everything correctly without any kind of flickering or any kind of weird side effects going on and that's it so now you can see now we have material ui setup with emotion so you can actually define uh components using the emotion styled api this motion css api you can use the custom material ui component library so it kind of gives you a lot of access to a lot of really cool customizable things that you can do with your components to make them look pretty for whatever application you might be building so um that's pretty much all there is to this part one using emotion um i will be making a part two where instead of emotion we are actually going to look at how to set this up with styled components library and the style components engine so be sure to look out to that for that and if you enjoyed this content please leave a like as well as a comment and subscribe it really helps out the channel a lot while we are growing and i really appreciate you guys taking the time to watch this video and i hope that i may have been of some help for you guys and i hope to see you guys in the next one so thanks again [Music] i

Channel: Leo Roese

Views: 668

Rating: 5 out of 5

Keywords: next.js, next js tutorial, nextjs, next.js tutorial, react next.js, react, material, material ui, material ui react, material ui next, material ui next.js, material ui next js, typescript, material ui typescript, emotion, emotion.sh, css

Id: IFaFFmPYyMI

Length: 25min 14sec (1514 seconds)

Published: Thu Sep 30 2021