3. NextJs Intro: Local Reviews Site With NextJs & Django Rest Framework Beginners Tutorial

hey everyone in this video we'll begin to build our front end with next gs for our local reviews site there'll be a lot of new concepts here so if you're unfamiliar with nexgs but you're familiar with react it should be fairly easy to follow along the goal of this video is just to give you enough to be able to build with next gs if you have that basic react experience so if you don't you may want to watch the or go read the official react tutorial or find some other video that goes with those basics but i'll try to explain everything i can as best i can as we go through it as well we will use a new css library as well called material ui for this project to make styling it a little easier so let's go ahead and get started by going over some basics of next js [Music] so right here i have the documentation pulled up i'll link this in the description if you want to go through this this goes through a lot of the basics uh it'll be more than what we go through in this video so if you want to go through some other things this will be here if you run localhost 3000 which i'll show you how to do in a second you'll see the links here and you click on the learn and it takes you right there as well so it's two ways to get to it but to run the servers i already have it running i'll show you real quick how we're going to do this so i have two terminal windows open here and so we're going to do here i go up a directory you'll need to first activate your virtual environment for python then you want a cd into this backend directory so my environment's already activated so i'll go ahead now and just cd in the back end and from here i can run python3 manage py run server just like we do on pretty much any python application and that will run our api and you should be able to go to localhost 8000 and get to it there and it should bring this up and then for the front end once you get to your root directory here you should have a backend and a front-end folder we'll see into the front-end folder and then we'll run npm run dev and that should run your development server for next.js and if you do nothing else and just have a basic starter project this should come up right here and there's always some links here to get some examples see the documentation or go through this learning course they have for it right here is going to go through that as well okay now without the way let's go ahead and go through some basic next js concepts so next.js has lots of benefits using it over just using your plain old react they have an image optimization they have a very nice integrated routing file system routing concept they have we'll go over here in a minute they have built-in api routes and they have built-in css support and much and many other things as well and so this gives you more than just a typical client-side javascript framework ability it gives you some extra things on top of that so first we'll go over that file system routing and what this will allow us to do allows to very easily create routes so if you're familiar with typical react you have to bring in like the router and then create your routes inside of the component there or inside of your base function base class and then use that to define all your routes but in the case of next gs inside your front end folder you'll have this pages folder inside here you have all of your pages so the others api folder which we'll ignore and we'll get back to in a little bit then you have this underscore app which is like your kind of base class or in this case a function for your project or for your app and then you have this index.js and this index.js automatically routes to the roots just at localhost 3000 where servers running i can create other routes by just creating more files and folders within here so let's say we want to create something to show our categories i'll create a new folder and i'll call this categories now inside of categories here i'll go ahead and create a new file and i'll save this as index dot js and automatically this index.js will point to the root path of our root slash categories and so i went ahead and generate a component which i should be able to do here with our cc this is a sublime package i think it's called react es6 snippets if you install it you have these options here and you can generate a component automatically like this and so i'll call this categories i'll go ahead and remove the props here now if i save this not inside this div here if i go ahead and just put categories like that and real quickly i'm going to fix my syntax i go to view syntax babel javascript and then save that and so now here that i have this categories page here at slash category index which is just the root of this folder it should show categories let's go ahead and try that real quick so i go here to low close 3000 i go to slash categories and then takes me this page here where it says categories so i can create more routes just like this i can go and just create more folders and put index.js to go to any sort of route off the route just like that but i can also do other things as well for example i create a new file here i can save this one as square bracket id closing square bracket.js and now this will go to category slash and id so once again i'll generate a component and we'll rename this to be um or i did the wrong one let's go ahead and fix that let's go ahead and do the functional component and i'll call this one just id do whatever you want and then down here i'll go ahead and just type the id it's about id and now i can go to slash category slash any id number and it will render this page so back in here if i change this i go to slash categories one and then shows id that can be any number i did if i did two it still shows id if i did 200 it still works show an id so this is a way to kind of to create a route that should go to any id so if you want to show a specific category you can pass the id in here and render that category based on whatever id is passed in the url the same thing goes for a slug so if i rename this file here to be in square brackets by set id i call it slug i can go ahead and pass in a slug here and it will render this slug page instead so if i go back here now instead of 200 i'll just put abc or any amount of text here and it shows slug so you can see pretty quickly how powerful this is how easy it is to create more routes i can create any folder structure and pass in index or square back it's id square back it's slug or whatever else and it will generate pages for me based off of what's passed in to the url hopefully that makes sense if not we're going to use this a lot throughout the project and so you'll get more practice and understanding of that if it's still kind of not super clear next what we have here is this api folder and we'll go ahead and look at the example here which is hello.js and you'll see here they have the link to the documentation for that if you want to read up more on this but generally what this is is it allows you to create an api endpoint using a or as a node.js serverless function we won't use this a whole lot we might use it a little bit but next gs is not just a client-side packet framework it also has server-side functions you can use as well and so you can create a server-side api endpoint here that you can use inside your front-end and you can create those node.js functions here and interact with those within your pages elsewhere in the project for now i wouldn't really worry too much about this as we won't use it much if we do i'll go over this in more detail but just know this is here and this is an option as well if you want to use that okay that is kind of the basics of this pages and everything you use here let's go ahead and install material ui and let's create our first page and then we'll go into some more next js basics after that so to install material ui i'm open my terminal again and i'm going to stop my front end server make sure you're in your front end folder here because otherwise you won't install it correctly so once you're in your front end we can we can go ahead and type npm install and we'll do at material [Music] dash ui core install that next we get the roboto font and in the documentation for material ui it has a link tag but in our case it'll be much easier to get the import syntax instead so i'm going to open a new new window up here and find that roboto font and if you google roboto google fonts it should be the first link that shows up we click on that link we'll come here and what we need here is the 300 so we'll add this one by hitting select style on the right we need the 400 500 and 700 so find regular 400 select that style medium 500 select that style and bold 700 select that style now over here on the right here you'll see our fonts are added and we can click on this import button and we'll give us this import syntax instead of a typical link syntax i'm going to copy this we'll add this to the default css file for all of our global styles for this project so back inside of our swap text editor we have by default the styles here and we have this globals.css at the top of this file i'm going to go ahead and paste that import statement and save that you also notice here we have this home.module.css if you want to create separate style sheets for each page there's this built-in way of doing that of creating uh name of the page.module.css but since we're using material ui this is not going to be used at all so we won't need to worry about that for this project that's another option there if you decide to want to use that as well finally the last thing we need to do to get this up and running is to install the fonts or install the uh the icons the material ui icons you can do that with npm install at material dash ui icons and that should cover everything we need to get started with this project and so just double check we should be able to go through here and check for our package.json that should be uh yes right here material ui core and material ui icon should be your dependencies make sure that's there because you'll need that to uh for this to work okay now that done let's go ahead and move on and we'll create our first page so we'll go ahead and we'll go to our um we'll go just to our index page just the root url and we're going to go ahead and remove a lot of this so instead of um yeah let's go ahead and delete everything within the return and we'll just make our own to get rid of all this we also don't need this home.module.css i'm going to go ahead and remove that and for now we don't need this image tag or this head tag so i'll remove all that as well i'm also going to go ahead and just delete the home.module.css file because we're not going to be using that at all okay now we'll go and save that and now our page should be running it should be blank if we were to go back to it so we'll go back here and we'll go back to the root oh we didn't run the server again let's go ahead and rerun our server again [Music] and this might throw an error because there's nothing there yeah so we have it because it's empty that's fine we'll go ahead and build the page now so material ui i'll go ahead and pull that up real quick has some documentation over here to go through what the different components they have if you go to this if you go back here to these three lines here click on that go to components you'll see documentation for everything about the use the first one will be this grid to create a grid so you click on that and you can read up how it works and how to use it it's you can find these source buttons here to look at the code of how to actually create what they have up here so i'm going to go ahead and go through all these things if you want to read up more on them this dot these docs will be in the description you can look at them there so the first thing i'm going to do is create that grid and so i'll do here is i'll do a grid and inside of this grid tag here we'll put first container and we'll add a spacing equaling 3 for now [Music] and we need to go ahead and import that here at the top so this will be import and we'll put our curly braces here and we'll do grid and this will be from the material dash ui core okay and now let's have our grid here we're gonna go ahead and for now we're gonna create one simple card we're actually we'll create three we'll create three cards and right now this will just be dummy data until we make an api call to get our actual data from our our api but inside this container grid i can make another grid tag and put a set of container per item for each of our individual items and they have different sizes you can use here i'm going to set excess so on small screens it will go the entire width of the screen which is 12. and on medium screens it will only be a third of that as we'll put four inside of this grid here i'm going to go ahead and create a card and this is another component from material ui create a card header and inside of here we'll add an avatar and this will be equal some curly braces here we'll put an avatar component inside of here and we'll add this and we'll add the label to equal just category and we'll put a c inside of that and we'll go ahead and close off our average a sub header as well and this will equal see all for now just some sort of filler text okay we'll go ahead and close off that card header and we're going to close off our card right here okay let's go ahead and import all these things so up here we'll import card card header avatar [Music] um that might be it let's go and save that now and see how this looks when we load it um okay so we're getting error on terminated gsx contents that would be because oh i forgot to close off the grids that would be a problem okay let's go and close up our grid components as well and in my import statement i forgot to put the at so she'll look the same as how we installed it should be at material ui core and go ahead and try this again okay there we go so now we have one card showing up here it's kind of plain and we'll add more to this later but for now just to get a basic page working that's all we're going to do we can go ahead and copy this grid item multiple times and should show up three wide on our screen so we copy this down two more times and save that come back here and reload the page you'll see we have three cards across the screen now and these later will link to the actual category to show all the businesses but since we have not that created or anything ready to go yet we're not going to work with that in this video but you'll notice here by just the basic styles there's some issues like it's kind of like against the top and sides of the screen here better have some padding and kind of make it kind of fit better on the screen and we can do this using some built-in style functions within material ui so what we'll do here is at the very top above our our export default function we can go ahead and add a cons use styles and this will equal a make styles function inside of here we'll pass in theme and this will be an arrow function we'll put parentheses and then curly braces now inside of here i can add all of the styles i want to add so for example i'll make a root style [Music] or say class these are all the classes we'll add to our items so i'll make a root class and inside this root class here i'm going to go ahead and add two things first add some margin to give some spacing around the edges or on the top and bottom and we'll center it in this on the width on the left and right so create a margin of 25 pixels and auto to center it on the width next we'll add a max width this way it doesn't go to the edge of the screen and i'll just add a 95 viewport with max width right there and now inside of our expert default functions we can go ahead and create a const classes this will equal our use styles function we just made and now i can do classes dot whatever in this case classes.root to access this class right here so now on our container grid i'm going to add a class name which in react this is how you add classes with class name so class name and inside here i'll put classes dot root and save that and i also need to import before forget make styles i believe it comes from the same core so do make styles right there and there we go now we have some spacing and it's not to the edge of the screen there's some gaps and some gutters on the sides as well some space on the top okay perfect so now we have a really kind of basic page created using material ui and some cards let's go ahead and add a nav bar and to do this i'm going to be saying a little differently i'm going to create a new a component called layout this layout will hold things that will go on every page so in the case of this we'll go ahead and create a new folder inside our front end and we'll call this components these would just be typical react components so create a new file here i'm going to go ahead and save this as layout with a capital l dot js like we do for what we typically do for react components we'll start with a capital letter and i'm going to go ahead and generate a a uh i wanted it's going to generate a stateless functional component here and so this layout component will just take all of our uh that we want to add to every page we'll put them on the page wherever we want them and then we'll also put the children and we're going to wrap this component around every other uh every function we have so what we'll do here is inside of the arguments here we'll pass in an object and we want to go ahead and grab children out of the props this will just be anything that's a child of this layout component which will be in our case everything i can go ahead and make this just a react fragment and now instead of here first i'm going to just put in children and nothing else if i go and save that now i should be able to wrap this layout component around our grid here so i'll do layout fast and then down here i'll go ahead and close out layout like that i'm going to go ahead and indent everything in inside of it and this should still work as it did before i need to import it too as well i always forget that let's go ahead and import [Music] layout from dot dot slash slash layout there we go okay and now so our cards are still showing up now but we wrapped it inside of this layout component that we created and imported it now we can go ahead and create another component for our navbar and add it to our layout component since i have our components folder we'll create a new file we'll save this as nav.js once again i'll generate a new functional component i'll call it nav that's okay and now we'll build a nav bar using the app bar component that we have available to us in our material ui library so once again here i'll create a fragment here and inside of here i'm going to go ahead and add an app bar go out of position equaling static and we can change that later if we want to but for now we'll keep it static then we'll add a toolbar component inside of that and now inside this toolbar component first we'll create an icon button this will be the three line button that you see like on material ui's documentation we're at that same sort of thing here so we'll do an edge start then we'll do a color actually add some class names as well and i'll create these in a second using the same thing that we did before so add a class name of classes dot menu button a color equals inherit menu okay we'll close off that icon button then we'll go and close off and then we'll go and add a menu icon here and we can add that using just the same component syntax we normally use now add a menu icon then go and close off this icon button [Music] component go to indent this one in and that should be our icon showing there now next we'll add a typography component so do type ography and this will be a variance equaling h6 and we'll add a class name here this will equal classes dot title and close off that and we'll set the title to be local reviews this will be a title inside our navbar then we'll going to close off that component as well let me close off our toolbar and then our app bar okay now before we do anything else let's go ahead and import all this stuff so up here at the top we're going to do the same sort of import statement so be import it will be clear braces from at material ui core okay now inside of here [Music] we'll add app bar icon button make styles which i'll use here in a second toolbar and we'll add the typography as well there we go now let's go ahead and add our styles that we added here we'll go and add a class for that so like we did before we'll create a cons use styles function this will be equal to make styles we'll pass in the theme i guess real quick in case you're wondering this theme here is the theme of the material ui which we can customize which we probably will do later and there's different functions on this we could also use for like breakpoints things like that so we may use this sometimes but most times this will be left just blank and not really used at all now inside of this make styles function here we want to go ahead and add a couple different classes so first we'll add a root this root will have a flex row set the one we'll create a menu button and we'll add a margin right and we use a special syntax where instead of using dashes we put one word and capitalize everything but the first letter or the first word i should say and then this will use our theme here so this will be theme dot spacing of two so this is one case where we do use this theme argument here we can add grab the spacing to set the spacing to be two which this is a default value set within our theme and finally we'll add one more class here which will be down here this will be title and this will be set to flex grow of one as well okay we'll go ahead and save all of that i think that should be it let's go ahead and try it now and i guess we didn't actually use it yet so it's not going to do anything yet let's go ahead and jump into our layouts let's go ahead and bring it in so do import nav [Music] from nav and then down here i'm going to go ahead and add our nav bar right above the children so show at the top of the screen just like that and i just did realize that there's one thing that i forgot which is import the menu item icon but or the menu icon icon so do from or import menu icon from and this would be at material material ui slash icon slash menu okay now let's go and try this out oh i just put let's put uh six that so this should be uh dot slash nav and it looks like we have an issue oh i don't know what i was doing there um so i put this inside another object here which doesn't make much sense this is all supposed to be on one line i'm going to fix that so it looks to look just like that and finally the last thing was i didn't put the slashes here okay we'll go and fix that and save that hopefully that should be it and okay so i never use my used styles let's go ahead and do a const cons use styles or classes equals use styles there we go easy for me to forget some of these things but that should fix that issue and there we go so now we have our navbar but you'll see one issue is that our cards are not being pushed down from this navbar here let's go ahead and update our styles to make sure they show up below the nav bar so update this to maybe 75 let's go and try that and it looks a lot better like that so we'll keep it at 75 for now and that should fix that issue now right now this button doesn't work and there's really nothing here but we have a basic nav bar we can add to later okay now with that done we can go ahead and get into some other next js basics and what we'll talk about now is this gets a server side props function we can use so next gs has some other interesting things that comes to pre-rendering and data fetching you can go read up on that but there are generally two different ways to pre-render in next.js by default nextgs prerenders every page so it generates the html first page in advance instead we have it all done in the client like you do in something like just typical react and so according to their documentation this should result in better performance and better seo so there's two forms there's static generation and then server side rendering for this project we're not going to go in in great detail on these two but we're just going to use the server side rendering which will allow us to use git server set props to fetch all of our data and so how this works if we go to our index page it comes down here at the bottom we can create a function called export a sync function and call getserver side props now here we can fetch our data then we'll go ahead and return [Music] an object that has a props object and so this prop objects we have all the props and we then can pass in up here instead of our arguments to access within our page so for now i'm going to go ahead and just uh pass us some dummy data so you can show how this works we'll do um number equals five and then number equal to number and now we have access to this number value inside of our uh actual client side function here and so i can put in an object and pass a number and make sure this name here matches what we have down here i can then use that inside of the page here so i'm going to go ahead and put category and then pass in this and put number save that let's go ahead and go back to our page now oh i guess it in that case isn't like this i'll change this to be this so we'll go ahead and pass in a some curly braces passing some back ticks category and then we'll put in a dollar sign and clear braces and pass in number right there and and there we go now it says category five and so this git server side props only runs on the server so this is one instance where we're using the server side next js functions as well as the client side next js so what we can do here is we can pass in all of our api calls here return them as props down here and then we can access them up here within this props object here we can pull them all out here you could also just put props in here and do props.number but i kind of like this better we can destructure it and pull out the actual props and just list them out inside of here so that's what we'll use here to create all of our api calls and that is the next step we're going to work on but before we can do that we need to go ahead and create some categories inside of our django rest framework so we go back to our browser here we go under api root we'll go into categories and we'll create some new categories so first things first we can't create anything without being logged in i'm going to log in with the admin account i created in the last video so just admin and give the password and now we should have access this post field to create new ones but we also have this test category i'm going to go and update this one as well because we don't need a test category and so for now i'm going to go ahead and create four categories i might create more in the future but for now we'll just create four just to give something to start with so first one will be food and drinks we'll give an order of one we'll go ahead and put that to update that one we can go ahead now and go back to our category list and create some new ones so i'm gonna go ahead and create another one called shopping give this an organ of two we'll put this testbusiness object on all of them for now and we'll change that in the future as well but for now that's fine then we'll go ahead and create another one here and we'll call this one health this will be three we'll post that then finally we'll create one called services and this will be an ordinal of four and we'll go and post that as well now if we go to our get on all categories we should have four categories food and drinks shopping health and services okay there we go so now we have our categories let's go and make an api call to grab this data so for this we're going to use axios so i need to install that go ahead and stop that and we'll run npm i axios to install axios and now we're going to rerun our server again now with that done let's go ahead now and create the api call so instead of this right here replace this with const restructure the result to pull the response.data out of it and this will set equal to await axios.get and we'll go ahead and pass in http colon slash slash localhost port 8000 slash categories in this case we want categories so we can find that by going to the root api routes and going to whatever url we have here so this case is localhost 8000 categories will give us all of our categories and a get request on this url we'll return all of them i'll return this list right here you have the count next previous and all the results right here so now we have our results we can go ahead and return that right here so i'm change this number to categories and then we'll go ahead and set the value to be data.results which is the list you'll see right here this list of all of our data okay now that done let's go ahead and add categories as a prop up here so replace this number here and instead of passing in just category we'll go ahead and pass in um or actually we'll do this um put some random stuff there for now let's go ahead and create a loop to go over all of our categories and create a grid item for each category so i'm going to go ahead and delete these other two of this just this dummy data we don't need get rid of all that and we'll go ahead and create a loop now and so the easiest way to do this inside react or in xgs is to use the map function so we'll do here is we'll go right above our grid item component right here we'll put some curly braces and we'll do categories dot map and then go and pass in a name for each iteration in this case we'll just be category create an arrow function and then put parentheses make sure this is not curly braces otherwise this will not work for you it will not render correctly and it will cause a lot of issues so make sure it's just uh parentheses instead then we'll go ahead and grab this whole grid item and not this last one because that's for the container we're going to paste that inside of this loop here just like that there we go okay and now instead of here i can go ahead and pass in our uh dollar sign and curly braces and pass in category dots and we called it uh name so categoric name to grab the name of the category dot name and then down here we'll do something similar the subheader we will do backticks and we'll do c all and we'll pass in the category the category.name again category.name and we'll do businesses so see all you know shopping businesses or food and drink businesses we'll go and save that let's go ahead and jump back into here and it's giving this error categories undefined it does this sometimes i'm still not sure why but sometimes you have to kind of mess with it for a little bit to get the load the first time okay there we go so now it's saying axio's not defined that's because i never imported it so sometimes if you use that error as undefined go ahead and just refresh the page a couple of times maybe do a ctrl shift r to refresh it and get without the cache and see if that fixes it i'm still not sure why that happens or how to fix it but that generally does fix it if you do that but up here at the top let's go ahead and import axios so we'll do import axios from axios save that okay there we go and you'll see now that we have our categories being stuck above this again occasionally with next.js with a dev server it doesn't seem to happen on production at least it doesn't has that to me yet on production and when i found online doesn't seem to happen very often in production but the style sheet doesn't always render and the dev server correctly and sometimes you'll have this issue where it doesn't show up if you make a change to the code so i go to the code here and i just add like a space here or something save that it's magically fixed so it only happens in the dev server so it should be fine when you go to production but sometimes you'll need to do that to get that to work okay so i'm going to take the space away and then we're back to where we were and you'll see all of our categories are loading correctly so that's really it for this video we wanted to get our categories and our basic page set up and go over some basic next js concepts there's lots more we'll probably talk about later that's hopefully a little basic that will get you started at least being able to build a simple front end with next.js using git server-side props and the routing system that they have it's pretty useful and pretty helpful to quickly put together a site and so that is it for this video i'll put the links to all the code and all of the uh documentation in the description so you can go through that if you want to read more about this i will come back in the future and make more changes to this and build a fully functioning web app using nextgs over the next few videos so thank you for watching and i'll see you in the next video

Channel: Legion Script

Views: 73

Rating: 5 out of 5

Keywords:

Id: TTYWV1fC7Mc

Length: 40min 29sec (2429 seconds)

Published: Sat Sep 18 2021