Building Websites using NextJS and TailwindCSS - Installation and Setup [JavaScript 20201]

hello world and happy hacking my name is mark from devmentor live and today we're going to be learning how to use nexjs to build server-side rendered react applications with very little configuration and next.js is a very powerful tool for both doing client-side react as well as server-side javascript i've been using it now for a little bit over six months and i have to say that i don't even use node and express anymore because i haven't run into anything that i can't do inside of next js so today what we're going to be doing is we're going to be creating a brand new project i haven't decided what we're going to be building with it it might be uh a courseware website where like we can have tutorials and videos and chapters and sections and stuff um it might be an e-commerce application where you can have a store and sell products or services um we'll decide as we go the the things that we're going to be working on today uh it's not actually going to matter very much today we're going to be creating an xjs project doing some basic setup getting the seo just right um building some of the base components that i do every single time which will allow us to have things like layouts and page objects for seo and building a couple of folders for our components i tend to follow a little bit of the atomic design pattern where you have atoms or in my case i call them ui and these are things like buttons and check boxes and inputs the sorts of things that you would get from carbon or material ui but i don't use any of those um because i like writing my own components for a couple reasons one is i get to learn react a lot better because i'm constantly building my own components rather than reaching for somebody else's components uh b i can always extend and scale my components to do whatever it is that i want them to do because it's my code i don't have to like you know learn somebody else's code read through the documentation find out the documentation's terrible find out that i can't do pull requests i'll find out that parts of it are closed source parts of it are open source then i have to worry about licensing and also because if i was to use something like say material ui i have to get this giant library in order just to use a few things that i actually want to use whereas if i just write my own components i'm not forcing my viewers and my users to actually like download tons and tons of stuff that i'm not even using um and we're going to be doing this with tailwind css i've been writing javascript html and css basically since all those things came out and i've been doing a lot of css in the last 10 years or so um and i'm quite familiar with css and i can do pretty much whatever i need to do in css but using tailwind i don't even have to write any css anymore um it's really an impressive library it's very useful and it makes it very easy to work with so we're going to be installing that as well hey alex say how you doing um alexa is one of my students thank you for joining us if you haven't already hit that like button of course and consider subscribing to my channel if you haven't and we are going to get going go ahead and say hello in the chat so that everybody knows uh where in the world you are i'm in mexico city and um yeah we're gonna get going here so i'm gonna start by using npx which just allows me to use node packages without actually having to install them globally on my system first and we're going to use one called create next app which is literally the same as create react app only it's going to build us a next js app instead of create react app and create react app is nice but it has a lot of downsides uh it doesn't do server-side rendering so essentially you're serving your user or a search engine or whatever a blank page and then the javascript starts filling out the site and that's just not optimal for either user experience or for seo so let's see what can we call this let's just call this uh building websites using next js and tailwind super super creative right so we're going to run that command and it's going to do some setup and while that's happening let's just talk about next js here so next gs is essentially a create react app sort of thing but it's built for production um and one of the things that i can say about next.js is that they have amazing documentation most libraries that you use will have okay documentation some of them have absolutely garbage documentation next js tailwind create react app these three libraries have amazing documentation so we're going to be doing a setup and they actually have um if we go to getting started um there's a setup for multiple uh environments right so if we typed uh well we don't actually have to do that we're doing the npx setup so that'll happen automatically as you can see here npx create next app and then you just give the name of it um let's go over to tailwind for a second we're also going to be using tailwind for all the css and tailwind just allows you to build really really nice looking sites without having to actually write any css they say without ever leaving your html but i find having all of my utility classes directly in my markup a bit distracting also it doesn't allow me to use css modules so what i tend to do is a hybrid where i use css modules and that way my react components can generate class names that are unique to my app and then i put these utility classes inside of my css so that it's not cluttering up uh my my markup okay so it looks like this is done so let's go to our folder here see the building websites using next.js and tailwind and i'm going to open this up in my code editor yeah rugifia tailwind is really really cool okay so this is the folder structure actually let me uh make sure that obs knows about what i just opened up there we go um and also i had uh somebody complain that they couldn't see my whole folder structure so i'm gonna do something new today um where if i need to show you something directly in my folder structure i can just move my my image over to the left so we'll go back to that for now um so the first thing is of course you just created this next app next js app and the first thing i like to do is make it conform to my own coding standards and file naming habits so the first thing that we're going to do is create an src folder then we're going to take everything that's inside of this pages folder and we're just going to put that into src next we can delete the styles folder because we're not going to be doing styling that way finally if you have watched some of my other videos you know that i don't typically create my components as individual jsx files because if they have style sheets or assets or other things that are part of the component there's really no container for you to put it in so you end up like three or four files at the at the base level so what i do is i create a folder for my component so we're going to create a folder called underscore app now this is a special component inside of react on next.js and what happens is it's actually a higher order component we're going to rename this to index jsx because it is javascript x uh xml it's not just a javascript file and the way you know is if you have stuff that looks like html and css inside of your javascript that is a jsx file not a js file it's important that we don't mix up our javascript and our jsx because they're not the same thing and also your editor in this case visual studio code will be much better at figuring out which snippets to allow you to auto complete if you do separate your javascript from your jsx so back to this we're just going to rename my app to app because there's no reason to call it my app and due to locality i like to have my export default function all together that way i don't have to look further down to see if i actually remember to export something so right now this one you know it has really no lines but generally our components will start to get longer so you can't actually see the top whether you're declaring the component and if you can't actually see the top when you go to the top and it looks like this you can't tell here if you've actually remembered to do the export and if you don't do the export it doesn't work so one of the principles in programming that i find to be very useful is the principle of locality meaning put things where you can see them the easiest put things in context where you're going to be using them so in this case export default function app puts it all in one line and makes it very easy for me to know if i remember to export it or not so i said this is a higher order component and here's what i mean by let me actually delete this css because we don't need it yet a higher order component is the same thing as a higher order function except that it's a component instead of a function a higher order function just means that it's a function that takes a function as an argument and it can return a new function as its return it doesn't have to a functional component is basically you're going to either take a function and or you're going to return a function a higher order component means you're probably going to be taking in a component here's the component being passed in as props and then you're going to be returning that component as well and again this is a special component inside of nextgs designated by the underscore app and what it's going to do is all of the components that we put inside of the pages folder are going to be rendered through this higher order component so how is that useful well imagine that we have some sort of a layout where we're going to have like a div around this thing and maybe we've got you know like a header component in here and we've got a footer component in here and we want to make sure that all of our pages have a header at the top a footer at the bottom and some sort of wrapper around them that's what a higher order component is really useful for so we're not actually going to fill this out but we're going to go ahead and leave an empty header and an empty footer because later on we're going to be using that um the next thing here is this api folder we're not going to be doing anything with it today but what this does is this allows you to have server side javascript running alongside of your react components and it will allow you to actually grab stuff from the server side on the first render which is the server side rendered so that you don't have to render a file and then do a fetch hit the back end get some data populate your component which means that you don't have spinners all over the place let's go on to index.js this is your entry point for pages we're going to rename it to index.jsx of course we're going to delete this style sheet because we don't need it we're going to delete import hedge from head because we're not going to be doing it quite like this we're going to actually include that into a component and for right now i think what i'm gonna do is i'm just gonna return a null here this is about the only time i ever return a null or use nulls in general is if i have a react component and i want it to render nothing while i'm waiting to do some other work so we're going to render null and then i'm just going to put a note in here to say um replace with whatever landing page component that will be used as the home page and let's go ahead and call this landing page okay so all this stuff happened inside of src pages and all we did was some basic cleanup um we're about to go into setting up tailwind and creating some utility components that'll help us with like layout and seo but first let me check out what's going on with chat um i'm a deep says he got lazy with material ui built all the side products in it got to try tailwind some some day um i'm not going to knock material but you do have to remember that material was not built by react developers and material supports react and vue and angular and who knows what else um so essentially it's like we have a product and now we're going to we're going to try to make it fit these other technologies but it wasn't built with those technologies in mind uh tailwind actually was built directly with react in mind but they also have a team that ported it to angular interview my screen is frozen i'm seeing my stream working just fine ah i mean so it's frozen right now you don't see what i'm doing you can hear me but you can't see me hello in chat you guys can hear me okay so you can see me but you said my screen is frozen is my code editor frozen right now well i see what you're saying it's stuck on home page nah i know what's going on thank you i can actually i'll just do this code again looks like i don't have the right one thank you alright so here's what i'm gonna do i'm gonna go back over to here and i'm gonna do a get reset hard actually i'm not sure if git reset hard will work because i yeah it's working okay so i'm going to delete this folder and delete this folder and i'm just going to re-implement the things that i already did um so we're going to delete the styles folder because we're not going to be doing styles like that i don't like having a folder with all my styles in it because then i have to jump around to go from the components to the styles to see what's affecting my component what i like to do is have a folder for my component the style and the component file will be inside of that folder so that again the the principle of locality i want to be able to see everything that component needs without jumping all over my directory structure so the first thing is is we want to separate the production uh distribution essentially from the source so i'm going to create a folder called src we're going to drag pages into src what this does is everything inside of our pages folder is kind of like considered a magic a piece of magic in next.js any component you put inside of pages will become a routable component meaning if we have something like pages slash ooh.js well food.jsx we would have uh a website page at forward slash foo so api we're going to delete this hello dot js we don't need it api is where you would put all your server side stuff in next.js we're not going to work with that just yet underscore app is a a special file and basically what it is is it's a higher order component that allows you to wrap all of your pages automatically so let me show you what i mean by that let's go into our index.jsx rename it to index.jsx delete the imports because we don't need them instead of home let's call this landing page and the reason that i do this is um it should be easy for the marketing team and the developers to be able to change which home page is the one that is being displayed and if you put all your code for home page right here you have to change this code in order to change the home page what i do is i create a page inside of pages for my home page and i might have other landing pages too and then it's just a matter of reference importing and referencing that so that you can switch around exactly which one is your homepage all right so let's just do um an h1 tag hello next js and let's go back to this underscore app.js as you know i don't like having a single file for my components because you can't put extra artifacts assets whatever you want to call them along with the components so we're going to create a folder called underscore app in this special pages folder for next.js it doesn't distinguish sorry about that turn down volume on my phone so we're not bothered again by messages um so nexjs doesn't really distinguish if it's a file or it's a folder so you can replace the underscore app.js with a folder called underscore app and we can just put our app js file in there rename it to index dot jsx now remember if you require a folder in javascript it'll automatically look for an index.js or index.jsx you don't have to put that in there um so we're going to get rid of our css file we're going to rename this to app we're going to move our export default directly onto the same line as our function declaration again this is the principle of locality and now let's talk really quickly about this higher order component basically um like i created this landing page here right this landing page will get wrapped inside of this special app component that comes with next js what this allows us to do is actually to do some sort of like a layout component here where we could have like here's my header here's my footer let's go ahead and just put header and footer inside of there so we can actually see it displayed and you'll see what i mean by being wrapped so let's go ahead and start this up we're going to start it with yarn dev because we're working on it there is a cursor on my screen i can see it i'm looking at the obs stream right now and there is a cursor okay so now you can see that we have a home page at the route of index and it says hello next js and our header and our footer are automatically included in our page component even though as you can see here there is no header and footer inside of our landing page again this is that underscore app component it's a higher order component it's built into the next.js so the first step that we want to do is we want to have a layout component that we can work on separately we could do it directly inside of here but i like to keep things as clean as possible so inside of src we're going to create a couple of folders one is going to be called ui ui elements are essentially atomic elements they're the smallest type of component that you can have in your react app so think like button text box paper all of the things that you would find inside of say carbon or material ui or whatever we're going to put a file in here now we'll leave it alone for now we're also going to create one called features features is a step up from the atomic level from ui by the way you can look up atomic design if you're interested they sort of go a little bit crazy because they're trying to model i guess nature or biology they got atoms and they got molecules and they got it's too complicated ui elements are just the smallest level of react component that you can have features are when you put a bunch of of these these ui elements together to create a single feature then you take a feature and you put it on a page so that's how i always organize all of my react apps going back to like 2016 and i've never found it to have failed me um so inside of features let's create one called layout so how do you know if the component that you're building would go into features or if it would go into ui the answer is if you're talking about a single component it goes into ui if you're talking about a group of components then it goes into features so inside of layout we're just going to create an index dot jsx file we're going to create a react component and this one is going to be called layout and we're going to use a special prop inside of react called children and essentially the way this works is anything that you put say that this is my react component anything that you put between the open tag and the close tag right here that gets rendered out to children so that's what children means in react so what we could do now is we can come back over to here and we can cut out the layout stuff move it over to our layout component like so and then what we're doing is we're separating concerns we're saying all of the things that i'm going to do to my layout are going to be in the layout component um everything that's going to be in my login component is in the login component you want to keep things my rule is keep like with like keep your imports that are importing from an external library together keep your imports where you're importing from your own code together keep your named import separate from your unnamed imports what i mean by that is sometimes you have something like import like i don't know maybe styles.css this is an unnamed import because we're not saying import styles from styles.css so in general just try to keep like with like and try to keep things as close to where they're being affected as possible so how do we get our page content inside of our layout that's where that children prop comes in all we're going to do is put some javascript expression uh curly braces put children inside of it and now whatever we render inside of our layout will automatically get put here so let's go ahead and import our layout component and then we come to another thing inside of nextgs it gets really annoying to do dot dot dot and you're trying to bounce all over based on uh relative paths because at some point you're going to move folders around and when you do that all your relative paths break right so there's actually a better way of doing this let's see feature slash layout i'm going to do it this way first and then i'll fix it we're going to put this inside of our layout component and we're going to wrap the layout component around our higher order component that's being passed in and then we should get the exact same thing as we got before we got the header we got the footer we got our page content in between inside of the layout so back to this relative path design if you do a search for next js relative paths you'll find this absolute imports and module path path aliases page what this tells you to do is that you can create a json or jsconfig.json so jsconfig.json and paste some of this code inside of here we specify what the base url is in our case the base url is src and then you can say uh what you want to make a base path so what we're going to do is we're going to say that anything inside of src is going to be a base path so that means we can go straight to features straight to pages straight to to uh ui and then we're going to add one more here and this one's going to be for the api and the reason is is i want to call the api at just forward slash api but in reality api is inside of pages because it's part of the dynamic auto routing that comes with next js so we can just do this and now we have the ability to do absolute paths we have to come back to our terminal and restart our app do that once it has restarted now we can fix this this relative path and we do it by this we say put the aerobic character or the at symbol um as the starting part of your path and then features since it's the first part of src will automatically resolve as will ui and because we did that special thing for api it will as well so we come back to our page we refresh it everything still works yes keep it simple is a very good principle keep in mind that simple and easy are not the same thing um for instance easy is importing uh node packages every time you need to do something all you gotta do is type npm install whatever garbage package right and you've now got that garbage package inside of your your project potentially bringing in security exploits in garbage code and all of the problems of that package are now your problems whereas simple would be what i would recommend which is building your own components it seems complex but in fact what you're doing is you're building a component that does only what you want it to do if you take a look sometime at the source code for like a material ui component what you'll find is that even a button is really really complex code and the reason why is when they created the first button it was simple and then there was a pull request to make it do something that somebody else wanted to do and after five years of development there's thousands of pull requests that have that button doing what thousands of different people wanted to do and then it becomes this hugely complex thing now you import that hugely complex thing into your app and suddenly you're like well i don't really know how to use this button anymore i got to read three pages of documentation to know how it works whereas if you write your own button component you're like okay well here my style sheet is right next to the component file so now i know where to find the styles for my button uh what's inside of my button oh it's it's five lines of code oh well i don't need a documentation i don't need to go read a bunch of information about that component i can just look at the code and it's five lines long so yeah keep it simple is important just remember simple and easy are not the same thing alrighty so back to the show so we've got a header we've got a footer these are encapsulated in our layout component we've got a page up here you'll notice this is problem loading page there's not actually a problem loading the page the problem is is that we've never given our page a title so let's create the concept of a page so i would say page is probably a good ui element so we're going to create a folder inside of here we're going to call it page we're going to create a file inside of that called index.jsx by the way if it bothers you that all of my javascript files are essentially index.jsx or i should say all my component files are index.jsx and you're like well everything at the top of my screen says index.jsx and the tabs you'll notice in my tabs it also shows what folder i'm in so it says yeah this is index.jsx but you're in the page folder it makes it really easy to find it right so the reason that that happens if you go to your settings in visual studio code and you do a search for label you're going to see this workbench editor label format option change it to short and you're going to get the file name followed by the folder name which makes it really easy to navigate so we're going to import a component we're going to call it page we have a couple of options here um one of the things i like to do when i'm building a component is i i put the actual code wherever it is that i'm working and i get it to work and then i extract it out into the component and the reason for this is if you start building the component in a separate file and it's not where it's being used you can't immediately see it in the web page first off and second you might end up building the wrong thing like for instance am i going to call this page and am i going to wrap all the content that's in here or am i going to say i have a page element like this and it just sits at the top well what is a page let's take a step back what's the point of a page component a page is the grouping of a concept so what is that concept a page has a url it has a route that you can go to and when you go to that route you'll get the component that matches the route a page also has a title so that when you're in your browser when you go to different pages each of those different pages and the tab will have a different title this is really really important for seo if all of your pages have the same title you're never going to rank well on google because google doesn't look at your website google looks at all the pages in your web application that it can reach and it indexes all of them independently and it ranks them independently so if your home page says you know buy cars houston texas and then it goes to 10 other page in your app that also have the home page by cars houston texas but only one of those pages actually is about buying cars in houston texas google is not going to rank those other pages well it might rank the one page well but you also could get duplicate content warnings where youtube or where google is essentially not really sure which one of these pages is supposed to be ranking the highest for houston you know car sales or whatever so it's important that each of your pages have a title so let's go ahead and just give this page a title we don't know we're building yet so let's just say something like welcome to my next js app so again back to the component if we're going to wrap the whole thing or not for now let's go ahead and wrap it and so you know that if you are some reason it didn't complete there we go if you're wrapping uh markup or other components you're going to be using that special children prop here it is just like that and we could start off by just saying here's a div and inside of there we have our children and this is exactly what we did with our layout there's nothing different however you'll notice that i did give it a title so we also know that we're going to have a title problem so how do we use the title well if we import head from next slash head there's a component that already handles this so what we can do is we can say we're also going to have this head component and the way that the head component works is you put the tags in between the open and close tag for the head that you want to appear let me get this import in so that the page will render import page from again the aeroba symbol what just happened there the aroma symbol forward slash which is essentially saying this is the root ui page so now our page will reload and i'll show you what i mean by the head so if you inspect the element and you take a look at the inspector and you open up this head tag this is the html header it contains all the metadata about that specific page so we got things like a car set to say that this is a utf-8 car set we got the viewport which is really important because the viewport defines the visible parts of the browser and that it's pretty in-depthly linked to your css one of the things that it does is it defines a zoom level it design it defines the width some other things and then of course you have all of your javascript and css inside of your head that you want loaded before the page content loads so how do we put something in there like a title tag well if we go back to our page we have now a head tag that represents that head and if inside of here we put a title tag and inside of here we just referenced that title that we passed in now you can see that the tab on my page says welcome to this next js app because we set the title for this specific page to be that so now every page that we create we can include this page uh component the page component contains the title we could also make it contain things like the uh the meta description and the the meta tags and some of these other things that are used by seo something about the last stream being aborted i don't i don't know which what day are you talking about because uh i'm what might have happened was is uh youtube started streaming something that i was just trying to create for a later date i wasn't actually trying to start streaming um so that might be it so coding after 30 another one of my students says finally able to tune into the live stream mark is the best learned so much from his channel and mark during our sessions oh well thank you coding after 30. by the way coding after 30 also has a youtube page and i think it's just youtube slash coding after 30. uh coding after 30 if you just put your channel name in the chat then people will be able to find it okay so back to this page thing we could put in the meta description and some other things looks like this um and we'll just say description and we're going to use a javascript expression tag which is this curly brace and we're just going to put the content description inside of there so how does this get used if i come back to here and i say that it also has a description of this is my awesome page about next js and this serves as the landing page for my app blah blah blah if we come back here and we inspect the element again and we look at our head tag we'll see now that we have our title tag in here and we also have this meta description tag which is again something that is used in seo so if you're building websites that need to be server-side rendered uh for clients and you need to include some seo elements now you know how to do it let's get back to our layout in order to start applying styles to this we really need to jump over here to tailwind and actually start doing that so if you do tailwind css and then type next js you will get a document that explains exactly how to install tailwind into your next jx js app it's giving us instructions for npm but i don't use npm so we're going to jump back over to our terminal and i'm going to do a yarn add and i'm going to add the packages that it talks about if you're using an old version of next.js or if you're using create react app you'll have to install this older version with post css at version seven but if you're following along with this tutorial you don't have to worry about it all you have to do is use this command that i've highlighted the next thing that we're going to do is use npx again so the command is npx tailwind css init and then dash p and what this is going to do is it's going to create our tailwind css file so right our teleconfig file so now we have a tailwind.config.js file and there's some options in here this is how you extend uh tailwind so if you want to add your own custom fonts your own custom colors your own custom widths grid widths etc you would do that here there's also a dark mode and i will do dark mode in another one of these sessions um i don't actually do it the way the tailwind css says because what it does is it loads a white page and then it switches to the dark mode and if i'm going to be using dark mode i just want it to load dark mode from the get-go so i'll do a whole paint or a whole screencast on how i do that um and then we have this post css config json file or dot js file i guess and if we look that's right here and it doesn't really have a lot in it just says we have two plugins the tailwind css and the auto prefixer what those things mean and what they do is not really that important it talks about this purge command um this is for this is for removing styles that you're not using in production um and extra code and stuff but we're just going to ignore that for right now it's not really important to what we're doing then what we need to do is we need to include a css file that's going to give us access to all of these tailwind features and we're going to do that by doing import dot forward slash globals dot css and inside of our underscore app file we're going to create a globals dot css file and inside of there we're just going to put these three different uh tailwind directives tailwind based tailwind components tell one utilities and just like that we now have tailwind built into our app by the way next.js uses css modules so if you try to include just regular uh css files it will fail on you it'll tell you you can't do that there's only one css file that you can do this with which is globals.css and inside of that underscore app component so at that point we should have access to tailwind so i'm going to do a yarn just to make sure that all of our packages are installed installed and then we're going to do a yarn dev to kick back on our um our app and when i refresh here you're going to notice that the text changes a little bit this is because tailwind has a reset built into it so that it resets all the css so that you can start from uh styling from the ground up so there you go you'll notice like my h1 tag is no longer a big text tag and that's because it's up for you to define what all of the tags should look like for your app and the reason that this is important is without a reset file if you open up pages that have css in them in different browsers on different operating systems it will look differently h1s will look differently in opera and in firefox uh your text fields will look different depending on if it's safari or if it's chrome or whatever and things also look different depending on if it's say ubuntu mac or or windows so a css reset will make sure that all of those html tags have their base css reset to something that's common alrighty so how do we get this thing going how do we build things up with css so the first thing is we got this layout component i don't want everything jammed over to the left hand side the layout that i want is i want everything in the center of my page and i want it to shrink down to mobile size but i also want it to grow to a specific width and not grow any further than that that's why we built this layout component so what i can do here is i can just start by putting these utility classes directly inside of the class name directive inside of my div and in order to do what i want to do here i can say container which is saying this is going to be a container element it's going to be a there's a max size to it and that's defined by tailwind and if you go to tillwin there's this search bar at the top and if you start typing stuff in there it's a great way to find out exactly how tail one works so you can see that if we give a container class utility class to any div when there's no break point meaning uh we haven't set the breakpoint essentially it's gonna fill up the entire page if we set it to small then the breakpoint will be at 640 pixels and it won't grow past that and these things naturally are mobile first design so you don't design for mobile in the sense that like you don't have to put classes in for your mobile design all of the base classes are for mobile and then if you want to make something specific to a medium or a large or an extra large layout you prefix the classes so i'll show you how to do that here in a little bit so we want a container but then we also want our site to be in the middle of the page right so let's just put a border on it so we can actually see and let's say border black and not actually seeing my border why is that inner border border black let's do uh rounded so we can see the border i still don't see the border the other thing is i want to move it over to the middle so we're going to do mx which stands for margin on the x-axis and we're going to say auto so our tailwind stuff is not being included and i know this well we do see some of it because it reset my files but i'm not seeing my container class being used i'm not seeing mx auto and i'm not seeing our border in our rounded which is kind of odd let's just we see okay yeah so our files are loading so to debug this i'm going to do inspect element [Applause] [Music] and i'm going to take a look and see that my css is being included and here's my styles here's the normalizer which is the the css reset i am going to oh look i'm missing an s on class name so if i come back to my browser now and i refresh it i should be able to see what i was not seeing before if you're coming into this in the middle of it uh it might be a good idea for you to uh just start the live stream over again watch it from the beginning so that you don't miss anything although there was a little bit there where my uh my editor was stuck which we fixed all right so you can see the little border around it and we can see that uh it's over here on the left-hand side if i actually make this bigger let me look at obs i'm not sure how obs is going to show that so it's not it's cut off because obs has a certain resolution but essentially it's being moved into the middle of the page it's just that uh we're not seeing that the way this is set up on obs let's see what if i do this what if i do if i make it shorter now i'll just have to go back to this this is 720p um so you're not actually going to see it actually you know we can do it if i do container dash small it should have worked didn't maybe because we're already on small what about container xs okay well anyway i'll take my word for it if you were to stretch your browser out to a much larger size it will move that content to the middle of the screen so our um our h1 tags don't look right so how would i style h1 tags obviously h1 tags are really important to a website my answer would be that this should be inside of our ui folder what i do is i create a react component for all of my elements that way i can have a component for behavior and my css for styling so i'm going to create one called let's do headings and inside of there i'm going to create an h1 oops that's supposed to be a folder so a new folder for h1 and i typically don't use all of the h tags um h1 is important h2 is important h3 is important after that the headings become a lot less important and also usually they don't have any behavior actually applied to them so index.jsx we're going to create a react component we're just going to call this one h1 we don't need to import anything and we're going to create an h1 tag we're going to use that children prop again and we're going to say that anything that we render out we're going to render it out inside of the h1 tag now we're going to import styles from dot forward slash styles dot module dot css so next js comes with react uh or css modules built into it and css modules are really nice because if you use css modules it's going to create a unique string that it attaches to the class name which means that your css classes will never collide with say css class names that you inherit or import from some other library so let's just say class name the expression and then we're going to say styles dot h1 so if i create that file now styles dot module dot css and i say that there's a dot h1 tag now i can start messing with it so we could say at apply which means that i'm going to use the preprocessor to apply um some tailwind utility classes to this class i could say something like text oh you know what also if you open up your extensions if you go to tailwind there is a tailwind css intellisense and if you install that it'll auto complete your your tailwind stuff which is pretty nice so we're gonna do something like uh text excel now let's go back to our page and let's replace this with our h1 component and we're going to import that h1 from ui headings slash h1 failed to compile ui headings h1 ui oh put it inside a page move it where it's supposed to be ui headings h1 there we go ui headings h1 maybe because i moved stuff around let's restart it wouldn't it be easy if we use styled components instead of the ui folder i don't like styled components because i don't want my react component to be littered with tons of css but your css and a css file that's what it's for i hate opening up react components and the first hundred lines are css i want to open up a react component and see the react code not the css okay so now you can see that the text got bigger how can we make it even bigger than that um if you go to tailwind and you use the search bar and you type in text you will see that there is a text size but honestly probably faster if we just go straight to size so font size you can see we got text extra small small base which is the normal size all of these are rems by the way rem means it's a relative element to the root so the root is defined as 16 pixels in almost every browser so if you say 1 em you're essentially saying 16 pixels 2 em will be 32 pixels so let's give it something nice and big so we got this text 6xl let's use that here's another reason why i like using my css modules because i want to have you know like a really nice big uh text for my h1 tags on desktop but if i shrink that down to mobile size i want it to how does that show up in obs by the way okay that's good it's fine i want it to react to the thing that it's on so responsiveness is automatically built in remember i was telling you that all of the styles are applied to mobile first anyway right so if we just duplicate this if we put like md colon in front of it we're saying medium sized screens it's going to be 6xl but maybe for mobile we just want it to be a 3xl so what this allows me to do by putting this inside of my css is i can have an apply for each thing that i'm tweaking right so if i'm tweaking the border i can have an apply with all of the border uh utility classes if i'm doing responsive design i can have an apply for all the base classes and then apply for all the medium classes for medium sized screens and if i'm gonna do different medium size versus large size i can put a apply line that's just gonna have the the large stuff right so if i go over here and i'm like okay well i also have xl screens and i want that to be the biggest which i think is seven let's see move this back to uh regular size 6l 8l okay so it goes up to 9xl so if i wanted my really really large screens to be 9xl that allows me to do it so you can see that the medium let's change it to large so the large is applied at 6l and extra large screens get 9xl let's actually change this to 4 and 5. that's better okay let's check to see if there's any comments yeah css modules just make your code more readable i don't care about the details here what i want to know is that my h1 tag is going to get the h1 styles if i want to see what those styles are i can just open up the module and i can see what the styles are so again this is separating the concerns you don't need to mix up your structure with your display the structure is just how things are sitting on the page and your display or your design is like what is this font color what is this uh the the box shadow etc what's the margin what's the padding i'm going to add another one here let's just say that this is um text gray and 900. i don't think black itself actually looks that good um so what i tend to do is i tend to do dark shades of gray like that that looks to me it looks a lot nicer than the actual black text okay so let's go back we have a landing page the landing page is inside of our pages folder and so it automatically gets a route inside of here we've got a page component the page component allows us to have a title and a description and then we have the content of the page all of this stuff has a layout applied to it because of this special higher order component in next.js called underscore app and we have our own layout component that we have wrapped the components that are passed into app are basically all the pages so this is the page and it's being wrapped inside of a layout if we go into our layout component which is a feature we've got some header we've got a footer and we've got the content in between the two is there any questions on the code that we've written so far i'll take a moment and i'll answer questions and then we'll charge ahead oh i also need to check my schedule because i have students coming up yeah my first session's in another hour so we got time don't see any questions coming in everybody understand what's going on so far all right let's work on our layout a little bit more so we got the concept of this header now normally you would have some sort of a logo and a site name for your header and you would have let's see if i can draw this um you would have basically over here on this side this area that i've highlighted i think you can see my highlight um you would have the logo in the site name and then over here on the right hand side you would have some some links like login sign up that kind of thing and then usually in the middle but again at the top you would have like the the main site links so we're going to follow that what that means is that essentially you're going to have a flexbox so we can say classname equals and we can just say that this is a flexbox and it's going to have a flex grow which means it's going to each of these elements that are inside of here are going to grow as large as they can be to fit the space the way that flexbox works is that all the divs inside of your flexbox normally divs go down your page but if you put them inside of a flexbox now they're going to go across the page so it's sort of like changing all your divs to spans but spans are inline elements divs or block elements by applying a flex to it you can have a block element that acts like an inline element so let's just say my site for the site name and then let's let's actually do three of these let's say that the one in the middle let's apply the flex grow to the the individual ones we want the one in the middle to grow to fill up as much space as possible we'll call that links we'll call those uh main menu links and then we want the login log out stuff on the right so we'll call that authentication links for now so now you can see that we've got this site main we've got the main menu links and then over on the right hand side we've got the authentication links if we were to add something like classname m for margin x three we're gonna get um a margin of three on the left and the right but we probably don't want that we probably only want to have a margin on the right um or we can take that out and we can put it to our middle so that it'll grow to take up all the space but it will have a little bit of margin on the left hand in the right hand and then maybe on the authentication links we want to have something like a margin left now margin right four which will take it off of the edge so it's not jammed up right against the edge and if we're going to have a margin left or right a four on the left hand side we probably want to do the opposite over here so then you get that then we probably want to make some space around our header right so there's a couple of ways of doing it we can add margin around our content which will naturally give it a height or we could give it a height with h which stands for height and then you can give it a value so like maybe h12 now you can see that our text has dropped down we could do really large sizes like 96 you can see it takes up a lot of space or maybe something like 16 which i think is a little bit more i don't know reasonable now if we put a background color on this eg blue 50 maybe you can see that we don't want it there we want it on our header bg blue 50. so now you can see the actual size of your header we don't want all of these things at the top of the page we want them at the um the bottom of it so if you go over here and you do a flex search you'll find that there's all of these different things that have to do with flex and if you come over here on the left hand side under layout you can start finding stuff so we got like container box sizing display you got your flexbox stuff and then if you come down here you've got your box alignment so if we're looking at these if we look at what does justify items do one of my favorite things about fl about a tailwind css is they have really really really good documentation which sucks for css um so you can see that if justify auto items auto they automatically align on their access if you say justify items start they start on the left hand side or the right hand side if you have it reversed and then you see we've got this justify item center so if you want to center stuff horizontally on a flexbox you can use justify item center if you want item if you want to align items vertically you can see here that if you use item center then they will be aligned vertically but if you do items end when the flexbox direction is the way that it is now our links are at the bottom of our flexbox and use grid and tailwind yes you can use grid and tailwind grid uh tailwind uses both flexbox and grid here's all the grid stuff and i tend to use a mix um flexbox is for uh if you want to have a flexible layout use flexbox um if you have a grid which is like columns and rows um definitely css grid gives you a lot more control over that and you can have grids that have flex boxes inside of them if you want to have that sort of thing going on all right so the next thing i notice is like i don't like the way that these things are jammed up against the bottom so here we can just say p which stands for padding and bottom pb dash maybe a six and it's probably too much two and now i can see that our links are up off of the bottom so the next thing is is our content needs some breathing room right so let's take our children tag here and let's put it inside of a div and then let's give that a class name and let's say that we're going to have something like a margin y which is the vertical axis we give it a 6. now you can see that it has uh six on the top and bottom right maybe do 16. there we go now our our content has some space i don't like that everything is jammed up against the edge of the page so let's fix that here we can say uh padding maybe six we don't want padding we want margin there we go although we don't want the the margin on the top so if we do margin y it's the top and bottom if we do margin x it's only the left and right and so then we can switch that to a padding and we still don't want to do that because we don't want to affect our layout we want the the blue bar on the header to go across the page we can do something like there we go put the padding inside of here and we have a padding bottom for a reason there let's add that to the content too there we go and let's also do the same thing for our footer there much nicer so we got a little bit of breathing room uh we can get rid of this border around it that was only there for demonstration so now we got some breathing room and the styles are starting to come out um on today's monday on wednesday i'm doing another uh continuation of this live cast and i'm gonna show you how to do authentication in next.js let's get to the main menu links because that's going to be uh showing you how to use links in next.js and it's also going to show you how to use the router in react typically you bring in a react router and you have to decide is this a browser router is it a hash router like what kind of router is it and then you have to have a configuration file where you're like this route goes to this component and that route goes to that component you don't need to worry about any of that with next.js because routing is declarative meaning that inside of my pages folder if i create something like users and then a component called login index.jsx inside of there let's just copy our landing page which we can do we don't have to change all of the imports because it's not relative imports it has this root import again that was defined down here in this jsconfig.json file we can just copy it wholesale and then let's just change this to [Music] next off login which we're not going to do right now i'm just going to create a page for it and i'm not going to worry about the description and we're just going to say the h1 for this one is login to your account okay so how do we get to that well our folder is pages users so we can go to slash users and then we have slash login and now you can see we've got a page it has a title it still has the header it still has the footer and now it has an h1 tag for log into your component so next.js makes this stuff really easy let's go back to our layout and let's create a link to the login page so that would be over here on these authentication links and yeah i guess styled components are cool if you want to clutter up your components with styling but i don't i want my css and css i want my react in my react i want those things separate and i've been doing this for 25 years so you don't have to take my word as gospel but there's a reason why i do everything i do and it's because i'm tired of shooting myself in the foot doing it another way so if we have a list of login links or a list of links anytime you have a list you should display that semantically to display a list semantically you use the unordered list or the ordered list depending on if you wanted a number next to it or a letter in this case we don't so we're going to use an unordered list and we're going to have an li tag for the first value and the first value is going to be a link tag what is a link tag link comes directly from next so we can just import link from next link and links have to have an href and if the if the link is relative to the site it'll automatically uh use like the react router so that the whole page doesn't refresh it just displays the new component so we're going to go to forward slash users forward slash login and we're just going to say this is login so now you can see that we have some text over here that says login and if we click on that that will take us here let's make it so that if we click on the the uh site name which might have a logo into it that it'll take us to the home page so we're going to do that by replacing login with my site and we're going to go to forward slash for the home page now if you click on my site it takes you to the home page and if you click on login it'll take you to the login page the next thing that i would say is then the the link component that comes with next js it just handles the routing it doesn't handle display so it doesn't know if it should be colored differently for the active link um so for instance if uh we're on the login page i would expect either that login link to disappear which i don't like i don't like it when uh stuff appears and disappears on the page just because you travel to a new page it confuses users but it might be a different color to show us that this is actually the link that we're on and we don't really have something for that built into the link component that comes with next.js let's see if there's an active state for this so you can see that the active link can be colored so let's go over here and let's say that when this link one is active also typically what you do is you put an a tag inside of the link and put your your actual text in there okay so let's go ahead and use this active uh basically in tailwind like there's these preprocessors something colon and then the actual utility class so what this is saying is when it's the active link we're going to put a background color of green and the tint or the hue is going to be at 700. class name now you can see that it doesn't change because tailwind doesn't actually know that this is the active link so typically what i do is inside of my ui folder i create a link component and inside of here i'm going to do something like you know my index.jsx file i'm going to create a new react component it's going to be called link i'm going to import next link from next slash link the two components can't have the same name otherwise there'll be a collision and what i'm going to do is i'm going to say that there's a next link and then inside of there we're going to have an a tag the href doesn't go on the a tag it goes on the next link we're going to pass in a prop called ahref we're going to pass the href to the next link we're also going to have some children which are going to be whatever is between the the link open and close and we're going to put those inside of our a tag so how do we handle the styling for the active thing well one way to do it is to go in here and say styles dot module dot css and we can say dot link dot active or because this is really only for our component we can just say dot active that's the other thing is using these style modules or css modules as they're called i don't have to do things like link dot active dot you know whatever because the this is an artifact of css being cascading so the concept is that css is a global thing but what css modules does is it takes away that global nature so that you don't make a little change over here to some css and then find out that 20 pages over there got screwed up because of your change which i like can't tell you how many times i worked on a really large site and you start changing css because you have some new requirements come in and you don't know that people are using those class names on all these other pages and since you're not going to go through 100 pages to check to see what happened when i change these these class names people just keep creating class names and keep creating class names because they're afraid to touch the old class names and before you know it you've got megabytes and megabytes of css and it's it's a nightmare to get through so i really like the fact that css modules makes everything local it's local to my component so let's just say that i'm going to do an apply uh directive and i'm going to say that when this thing is active when this link is the currently when the link has a href and the href is the same thing that's up in the url then that is the active link let's just say text read 400 and let's say that it's underlined so if we go back to um tailwind's documentation if you type underline you'll see that you can have underline you can have line through you can have no underline there's a bunch of different utility modules for this so we're saying is when this link is active it's going to be red and it's going to be underlined so how do we make that actually happen the answer is we can import the router use router that comes from next router and then we can say const router equals use router and we can get access to the route we can get access to the params which i haven't covered yet but i will or the alternative is you can also just go straight to the window object but the problem with the window and the document object is this is server side rendered so when it's on the server there is no concept of a window or a document so if you try to use those directly you're going to get an error so we're going to use the router so we know that we want to find out what the path of it is but we're not really sure what what is the thing that we call to get the path my way of doing this is just to do something like a console.dir and just pass the router to it let the page reload go to the inspect element look at the console oh we have to actually use this so let's go back to our layout instead of importing link from next link now we're going to import it from our library ui link okay a function default which one does not like maybe this is a named import let's find out yes it's a named import let's go back to here put that in bracket so it's a named import and now you we can actually see the object that is there so you can see that if we call router.as path we get the path which is what we want so router dot as path refresh our page and now we can see that it prints off forward slash users forward slash login which is what our route is and it's also the href for our for our uh link right so what we can do here is we can say i'm going to add a class name to this and it's going to be a javascript expression because we're going to be using conditional rendering and what i want to say is if the router dot aspath is equal to the href property that's passed in then i want to style this component with the active class but we can't quite do this because we're using style modules so you can't just put active in there so we're going to say styles and then dot active and if we come back to here we get rid of that we import our style so import styles from dot forward slash styles.module.css now you can see that when you're on the same page as the link it becomes active we can now color it we can give it underline and other stuff if we go to the home page now the home page one shows that it's the active link and so this is what i mean by simple versus easy it's not easy to create your own library of components but it is simple because this component only does what i want it to do it doesn't do what the thousands of other developers wanted it to do with their pull requests it's your code your code only if you can't understand your own code you've got bigger problems than using somebody else's library so the code is short it's sweet it's easy to understand i wrote it so i understand it i don't need documentation and if something is broken inside of it it's up to me to fix it i don't have to put in a pull request and wait for somebody to approve the pull request and then merge it in and then update all of my dependencies because i don't have any dependencies so that is how you do routing index.js and how you can create your own link component that uses the next.js link component but then decorates it here's the next.js component here's our link component and what we're doing is we're decorating it we're saying take the original thing add this extra functionality onto it last thing that i have time to show you today is how do you do parameters in next.js routes so let's say that we have like a user's profile page right and maybe it's at users well i guess profile page is kind of boring um what if we have yeah why not okay so say we got user 12. so let's just say there's a there's a database somewhere and in the database we have users and user number 12 is supposed to have certain data that's just unique to that user right so how do we get that value actually let's do something a little bit more interesting let's say that this is a courseware document where we're going to have courses and you can take a course and it's going to have lessons and sections and videos and all that cool i'm actually building this so that i can start doing courses because i don't like using other people's software because i'm a programmer and programmers are supposed to build their own so let's say we got courses slash um everything dash u dash wanted dash two dash no dash about dash next js so we've all seen links like these these are seo links and the concept is that the actual uh url tells google a lot about what the content is so this is everything you wanted to know about nextgs maybe we did something like just next js intro course maybe that's more seo friendly so how do we get a page wired up to this route well we know that the first value here is courses uh by the way i'm getting uh i'm getting a buffer error do you guys still see my video or do i need to reset my router or something say something in the comments if my video is coming through happy and i'll be right back everything good nobody's on my internet so i'm not sure what's going on okay so let me get back to this so we know that the the directory here is courses right all we have to do is come back to our pages folder create a courses directory and then inside of here we're going to do our parameters so we're going to create a parameter called slug notice that it's in square brackets square brackets are denoting to nix js that this is a parameter then inside of there index dot jsx let's create our component we're going to go ahead and just copy the the same layout that we have from the other one so we're going to call this one uh course details page and the title is actually going to have the same thing that's in the url and let's have the h1 also get the stuff from the url so how do we get access to those parameters well we already saw that we can get access to the parameters using the router so we're going to use the router again this is the next js router so if you remember i said keep like with like these imports are from my app this import is from the package so what i'm going to do is i'm actually going to put that at the top and i'm going to put a space between my package imports and my local imports to use this this is just a hook we're just going to say router equals use router and now we should be able to access that so again i don't know well theoretically i don't know what value i need to call on router to get the thing that i want so i can just print out the object so let's do an inspect element let's look at our console and we can see that here's our router so we've got ask path we've got base path we've got events we've got prefect oh look we've got this thing called query and inside a query we've got a key called slug because we named the folder square bracket slug square bracket so that came through as query slug and then the value so we know that if we want to get that we can say broader dot query dot slug so let's go ahead and make that the title and let's make that the h1 tag and so now you can see that the title has become next.js intro course and the heading h1 of the page is next.js intro course now of course you wouldn't display that more than likely you would open up your database and you would look for the course that has the slug of next js intro course and you would load all the data for that course and then display that data on the page and i would say probably next week on monday i'll be showing you guys how to integrate mongodb into your next js apps and how to use the server side api stuff to do querying against your database um so this stream is part of an ongoing course that i'm doing right here on youtube we're probably going to go through i don't know maybe 10 or so videos on next.js over the next month or two because there's a lot to cover it's a very powerful framework and if you use it right it will replace express it'll replace running direct node apps close to the metal you won't be using create react app unless you're just trying to prototype something really fast it has server side rendering you can also do it with static site generation like you would with um with gatsby i'm not a big fan of gatsby except for making blogs out of it it's really good for blogging i don't really like it as a static site generator otherwise next.js is an amazing static site generator so maybe one of the use cases for nexjs is you're an independent developer and you want to build websites quick for local businesses so you call around and you you pound the pavement and you get a bunch of clients locally that say yes i want you to build my website you can build your own a little platform out of next js that'll allow you to quickly build these websites for those local businesses and rake in the money so part of this course is i'm going to show you how you can do that sort of thing i think the best thing you can do as a developer is to be your own boss because if you're your own boss nobody can fire you you won't lose your job to downsizing you won't lose your job for covid and you could just keep working like like nothing happened so anyway this is uh probably the end of today's live cast thank you so much for joining me make sure to hit that like button if you haven't already uh go to uh my channel on dev on youtube devmentor live and subscribe if you haven't already consider joining my hardcore supporters it's only 25 bucks a month us dollars and every friday i do a two hour session just with my hardcore supporters where i will debug your code i'll answer your questions directly we can talk with our voices i use zoom and desktop sharing for those things so it's really useful and you can get a taste of how i do my mentorship which is my main business so monday through friday um 12 p.m central to about 8 p.m central i do private mentorship uh one-on-one hour-long lessons you can find out more information on that at devmentor.live you can actually book your free interview where we can have 15 minutes just to meet each other you can ask about how my mentorship works ask any questions that you need and then if you're already one of my students there's a book a session linked directly on there i guess instead of just talking about it i can just show you the page so this is my website this is built to next js and tailwind and as you can see um you can load your your your interview right here you can book a session if you need consulting work done i do that as well and i will be seeing you guys on wednesday where we're going to continue by doing uh authorization and some other stuff so i will see you then happy hacking stay safe and have a great day

Channel: The "No Bullshit" side of AI with Mark Tellez

Views: 2,991

Keywords: react, reactjs, web development, javascript, es6, programming, sofware development, learn to code

Id: Ak31wWRidRQ

Length: 90min 29sec (5429 seconds)

Published: Tue Jan 19 2021