Next.js / React App with django-ninja API | Building a Next.js app

in the last video we created an API using D Jango ninja in this video what we're going to do is create a nextjs application and build a user interface around this API and we're going to learn some Concepts in nextjs along the way for example we'll see the distinction between server components and client components we'll see how to use tailwind and Daisy UI in a nextjs application and we'll dive into the new nextjs app router Paradigm and I'm probably going to separate this into two videos but this is the first one so let's dive in and get started so to start with we're going to look at the react documentation here what we want to do is build a new site with react and react itself will recommend picking one of the react powered Frameworks that are popular in the community and some of these include nextjs and remix and there's also Gatsby as well now the most popular of these is nextjs so what I'm going to do here is copy this command and I'm going to go to VSS code now I have a folder open here in VSS code with the back end code from Jango ninja in the previous video in the terminal here you need to have nodejs installed but what we're going to do is run this npx create next app command and that's going to generate a next application in this directory but it's going to ask some questions during the process so first of all we're going to install the create next app package and we're going to give this project a name and I'm going to call this devices front end and for this project we can either use typescript or not I'm going to select no to that and also to es lint but I am going to add Tailwind CSS and we can add the source directory as well and we are going to use the app router Paradigm so let's select yes to that and we'll explain that later in the video and I'm not going to customize that default import Alias we're just going to select no to that and it's going to run through the installation of these packages now while that's installing I'm going to explain app router this is the modern way of doing routing in a next GS application and what it's going to do is it's going to add an app directory into this Source directory so if we look at source you can see there's an app directory here and for the routes that you're going to create in the next application you add folders with the names that you want to appear in the path for those routes so for example in this next SL react application we want to add a route to fit all of the devices from the Django ninja backend and we want that to be on the SL devices URL path so what we're going to do here is create a route in nextjs by adding a folder on underneath the app directory and that folder is going to be called devices Now to create a page for that route you can create a file called page.js within the directory and this page. GS file will contain the component and that can be a server component or a client side component in nextjs we'll explain the difference between those in this video and the next video now by default the components that you add here are server based components in nextjs and that means that the code is going to run on the server and what you return from the comp component that's the HTML essentially that you're going to ship to the client you're not going to ship as much JavaScript as you used to do in a react application because what you're doing here is generating a lot of the code on the server and that can be more efficient and we'll explain a bit more about that later so let's now create a component and what you do is you can export the component in order to create it in this page.js file and the component is going to be an async function so let's create an async function and we're going to call the component function devices and what we can do here is return some GSX which is basically like HTML here and this is a convention in react what you return from a component is GSX code that's used to render the user interface what we're going to return here is this HTML so we have a simple div that contains some Flex classes from Tailwind CSS which we're going to use in this video for styling and then for now we return a simple H1 that says my devices now one thing to notice when you're using react and nextjs is that you don't use the normal HTML class attribut you're using class name and that's because this is Javascript code and class is a reserved keyword now in order to run this application we can run the npm Run Dev command now we need to be in the devic's front end directory to do that so let's go into that directory and run npm run Dev and that's a command that's been added to the package.json file when you run create next app and that's going to start a server on Local Host 3000 and if we go to that page we can get the nextjs landing page if I go to the URL here and add slash devices we're going to get back The Styling and the content that we defined in that component now the styles that you see here with this weird kind of striped look we're going to remove them soon now what I want to do now is talk a bit about nextjs rendering as I mentioned earlier in nextjs we have the notion of server components where the code runs on the server and then we have client components where the code runs on the client and client components will be familiar if you used to use react with without nextjs where you defined all of the code in a front-end application that ran on the client and that JavaScript bundle was sent to the client and then the client side code would run and perhaps fetch some data from the back end so it was a different process than just using server components we're going to dive into that in this video now by default nextjs uses server components so the content is generated and rendered on the server and a smaller bundle is sent to the client and that means within our server component like we have here we can actually perform API requests from the server to our jangle ninja application we can await the response for that request and then populate the content that's going to be returned to the client so the actual code to fetch the data from Jango ninja will run on the server in the server component and that's a little bit different to the way it used to be with client components because in a client component you would get the bundle you would then send a fetch request to the Jango ninja API and then you would wait for the returned content and use that to to update the Dom we're going to show a different methodology here with the nextjs server components and we're going to reference this page here on data fetching caching and revalidating now because we have a server component we are going to fetch data on the server with the fetch function so nextjs actually extends the native fetch web API but it adds some additional options that allow you to configure caching and revalidating behavior for each fetch request that's sent on the server so if we look at the code in this nextjs component component you can see that in the component we're sending a fetch request and we're awaiting the response from that particular endpoint if the response comes back and it's not okay the component then throws a new error otherwise we return a JavaScript object containing the response data now this is actually a function that's defined in the page. TSX file and that's called within the component that's actually exported from this file so what we're going to do is something very similar I'll leave a link to this page below the video but what I'm going to do is go to VSS code and just above the component I'm going to paste the code for a function called get devices and that sets up an endpoint that points to our D Jango server and it points to the/ devices endpoint that we configured in the last video with Jango ninja so we send this nextjs fetch request to that endpoint and again we check if there's any kind of error otherwise we will return the data from that endpoint and we can amend the code in our server component here to actually use this function so I'm going to copy the name of the function and we're going to go down into the body of this component and we're going to get these devices by setting up a variable called devices and we're going to call that function called get devices and we are awaiting the response data and remember this is fetched on the server and we will then have access to the devices in the return statement here before it's sent to the client so let's go down here and I'm going to add some code into the jsx that's returned here I'm going to add a new Dev here and this Dev contains some margin top to separated from the H1 tag as well as some Flex classes and what we want to do when we get the devices from D Jango ninja is we want to map over them and for each device render it on the page in this react application so we're going to define a bit of JavaScript code a bit of dynamic code here that's going to look at the devices that we have in our component and that is these devices that were fetched from Jango ninja and then we're going to map over these and for each device we have an arrow function and we're going to create some SX here so for each device I'm going to create a paragraph tag and I'm going to give this a class name and let's give it a class of text extra large from tailwind and within the paragraph tag we're going to take the device that we are iterating over and that is an object coming back from our Jango ninja API and it has a key called name so we're going to render out the device name and one other thing we need to do is add a key that's going to have a unique identifier for each device and the key is going to be the device. ID property now at the moment I'm getting an error and that's because I need to start start the Django server so we're sending a request to Jango here but Django is not currently running so it's not returning any content I'm going to open a new terminal here and within this backend directory I'm going to activate the virtual environment for the D jangle project and then we're going to start the Jango server using the Run server command once that's running we can go back to our node application and I'm going to restart this server here and once that's started up and it's running we can go back to the browser and now we're getting a list of theend ERS that are coming back from our Jango ninja back end so what's happening here is that we fetch the data in the component by calling this function called get devices that sends a requests from next to the Jango application it fetches the devices which we get in the component and then within the HTML or the jsx that we're returning from this component we are mapping over each device and for each one of them we're rendering out a paragraph tag and we are rendering out the devic's name so a very simple user interface but it's showing how we fetch the data from jangle in a server component in nextjs and then use the response from jangle to populate the content we're returning to the client site now one thing I want to quickly remove is the kind of striping effect that we have here there's a file in the nextjs project called global. CSS so I'm going to go to that and I'm going to scroll down to the body block and I'm going to remove this CSS code if we save this and go back to the page you can see we now get a white page containing the sensors and a paragraph tag now one of the benefits of using nextjs instead of react itself is that we get back a populated page containing the data from the back end and that's better for SEO purposes if we look at the source for this page so I'm going to inspect the Dom here we get the body and then within that we have the div and all of the sensors here are already populated when they returned from the back end and we can prove that by looking at the page Source I'm going to check line wrap here so we can see this better you can see the paragraph tags that are rendering out each sensor each device so the actual source code that we get back from the server already contains all of the data and therefore this is better for SEO because any crawlers that are indexing your website can actually see the data and it's not having to be loaded after the fact by a JavaScript application so that's one benefit of nextjs with server components we're going to move on now and we're going to build a device detail page so I want to add a link to each of these devices and when we click that link we're taken to a detail page and for that we're going to need to reference each device's ID in the URL so it's going to be SL devices slid and we need a URL that contains a dynamic part so let's now see how to do that I'm going to open some documentation from nextjs here on Dynamic routes if you need to create a dynamic route segment what you can do is wrap the folder's name in square brackets like this and typical examples of that is when you're fetching an IND individual item you would wrap the ID or the slug for that item and that's what we're going to do now because if we go back to our jangle application I'm going to go to the models.py file and the device model class that contains a field for this Slug and we want that to be present in the URL on the front end so what we're going to do is go back to the app directory and within the devices directory we're going to create another route here so we create a folder within that directory and this is going to contain a dynamic route segment and we're going to call it slug and as before we're going to create a file in here called page.js and we're going to create and Export a function called device from this file so this is the nextjs server component that's going to render the page for an individual device and this is going to get the pams from the URL so we can destructure these pams like that as we Define this component now what we're going to return here for now is going to be some jsx code so I'm going to paste some code in here and again we have a div with the classes for flexx box and this time we are going to take the device and we want to render details about that device now for now we're just going to look at ps. Slug and the slug again is coming from this Dynamic route segment it's going to be present in the URL path so let's leave it as that just now and we can go back to the other page.js file for the device list page and to the devices that we're rendering here in this paragraph tag we want to actually add a link to the detail page so how do we do that in nextjs let's start by separating these into some lines here so that it's a bit cleaner so each device has a paragraph tag but we're going to bring in an import from nextjs in order to create a link to the detail page let's go to the documentation where we have a component called link that allows us to provide this client side navigation so if we scroll down to the code snippet I'm going to bring the import into our file here at the top so right at the top just above this get devices function let's import link from the nextjs module back to the paragraph tag I'm going to wrap the code in here in a link tag and to the link we provide an attribute called HRI and to link to the devices detail page we need to look at the device and get the slug from the device so in order to do that let's create a block of code here and we're going to use a template string in JavaScript and this is client side so it's going to be SL devices and we need to reference this slug that we created here so in order to do that we're going to pass in a dynamic variable here in this string and we're going to reference device slug so in JavaScript if you have a template string you can use the dollar sign and the curly braces to refer to a value let's now close off the link tag and I'm going to bring this device. name into the link tag so the actual text that's going to be rendered in the link I'm going to paste that in here and because we're no longer just referencing a paragraph tag I'm going to add some Styles into this paragraph tag so because it's a link we're going to make it blue and when we hover over that link we're going to darken that blue color let's go back to the page and we can see that each sensor each device now is wrapped in a link so let's try clicking one of these and we get taken to the device detail page and at the moment all we're getting here is the slug from the URL you can see that in the URL above here we're referencing that here in the page and that is done through the params that are passed into the component and you can get access to any Dynamic route segments through these params now of course what we actually want to do is we want to take the slug and we want to send a request to Jango ninja and we want to fch the details for that particular device now how do we do that what I'm going to do is go back to the back end directory and we're going to look again at the api. pi file that we used in the last video and we have an endpoint here SL devices SL slug on the Jango ninja API and that's going to return a single device so we need to call this URL within the device detail page so let's go back to page.js and we're going to create another function just above the this component in order to fetch that data very similar to what we did here in the previous component so I'm actually going to copy this and we're going to bring it into the other file so we're going to paste this in and we're going to call the name of this function get device because we're only going to fetch a single device now we need the slug so we're going to append the slug to this URL so I'm going to pass the slug in as a parameter here and then we're going to use a JavaScript template string again here and we can reference the slug using that syntax so let's pass the slug into the URL path we then send a fetch request to that endpoint but what I'm going to do is amend this and add some configuration that's specific to nextjs we can add a key called cache and I'm going to set that to a value of no store now the reason we're adding cash no store is because we're going to modify the device later in the next video notably we're going to update its location so we don't want nextjs to Cache the response data from this endpoint so if you want to tell nextjs when it's performing these requests to avoid storing the data in the cache you can pass cash no store to the fetch request now what we need to do is add a call to get device within our function here within our component so let's create a variable here called device and we're going to await calling get device but we need to pass params do slug into that function once we've done that we're going to amend the content that's returned to the client here and what I'm going to do is paste some code in here just so that this doesn't take too much time so what we've got underneath the H1 tag is another div and in that div we have a paragraph tag and we're rendering out the device's ID and its name so we're getting access to the device properties because we're calling this get device function which in turn we'll call Jango ninja in order to get the device details and then underneath the device ID and the device name we have another div with a class name of margin top 3 and then what we're doing is we're checking if the device has a location and this uses a JavaScript tary operator and if the device does have a location we are rendering out that location here in a span and we reference the location property on the device and that's a nested object that we can follow to get the name of that location for more information on that you can check out the API video on Django ninja and if we don't have a location we can just simply render out that the device does not have a location and at the bottom we have a button that has an assign location piece of text and we're going to in the next video add some code for that button so that it brings up a model and it allows you to reassign a location to the device so let's save this file and go back to our device detail page and you can see that that has been updated with the new code so we're fetching the device and we have this slug that's in the URL here and then we have this simple paragraph containing the device ID and the name of the device in this case we have a temperature sensor and the current location for that device is the greenhouse our button that says say aign location does nothing at the moment we'll work on that in the next video and if we go back here to the device list page and we select one of the other sensors let's see the proximity sensor you can see we get the details for this one including its ID and the location is the garage so again we're fetching this data from Jango ninja from the back end in our nextjs server component and then within that server component we take the data that we've retrieved and we use it to populate what's returned to the client and this is going to contain all of the information from our backend API when the page first renders on the client and that again is very good for SEO purposes now what I'm going to do to finish this video is I'm going to work a little bit on this button here we're not going to create the modal and allow users to assign a location to a device but we want to start by populating this component with not only the devices but also all of the possible locations now in the last video If we go back to api. Pi we created an endpoint using Django ninja to fetch all of the locations from the back end and that had the URL slpi then SL locations and we can see the data return from that page here we have in our system three locations and we now want to fetch them in the device detail page so that when we click this button in the next video the form that we have is automatically populated with those locations so what I'm going to do is go back to the detail component and we've defined this function called called get device I'm going to Define another function that's almost identical just below this and this one is going to be called get locations and this time we're sending the request to Django ninja and we're going to the API locations endpoint to fetch all of the locations from the Jango ninja API and as before we await fetching the response and then if there's any problems we will throw a new error otherwise we will return the JavaScript object with the location data so what I'm going to do now is go back to the comp component and it's here that we call the device endpoint and we could do the same below to get the locations but we want to actually perform these requests in parallel and that's because if we added a second API call just below here what is going to happen by default is that we're going to wait on this one returning because of the await statement and then only when it's returned are we going to send the second API request so this is sequential but we can actually parallelize this and we can do that with the promise. all function in JavaScript so I'm going to delete this line of code and we're going to create a new line of code just below here and what we're going to fetch is not only the device that we were fetching before but also the locations and we're going to use a call to promise. all so we're going to await the response from this and what we pass to promise.all is an array of promises so let's pass a JavaScript array here and we're going to take the get device function that we had before and we're going to paste that in there and we're also going to add the get location function so we can remove this original line of code and what we're doing here is we're fetching both the device and also the locations and we're doing it in parallel and awaiting the responses from those so let's just make sure that nothing has broken on this page if we refresh this page you can see we still get the data for the device and if we go back we're still getting the list page as well so what we're going to do now is we're going to go back here and just to finish the video I'm going to make sure that we've actually fetched the locations just with a little bit of of dummy code so right at the top here underneath the div but above all of the other content I'm going to create an expression here in the next component and we're going to take these locations that we fetched from Jango ninja and I'm going to use the map function and for each location let's just render it out or rather let's just render its name out so we're going to reference the location.name property and that name property if we go back here it's one of the fields on the response data for each location so let's go back to our application and you can see the different locations right at the top here and there's no spacing between them but you can clearly see we have the office we have the greenhouse and the garage so we have the locations available in this component in the next video when we click this button we want to bring up a model and we want to allow the user to select a new location for the device and then send a request to Jango ninja that's going to reassign this particular device to its new location so that's coming up in the next video but in this video we've covered a few different things I want to give a quick overview of some of this we've covered nextjs server components and that's all the components that we've used so far these are all running on the server and all of the requests that we're sending are going to be sent to D Jango from the node.js server and then returned to the client in this statement here so what happens when the client sends a request is that the request reaches this server it then sends the request to jangle fetches the data and then populates the content that's being returned to the client we're going to see an example of a client component in the next video video but what we also saw in this video is the ability to use the nextjs fetch request and also links in nextjs if you go back to the device list page we imported the link and we used it in the code here in order to allow us to send the user from one page to another on the client and finally we saw a little bit about the nextjs app router Paradigm and that's a new paradigm in next for routing we have an app directory where we create folders underneath that directory that represent the routes on our client side application so that's all for this video if you've enjoyed it please give it a thumbs up and subscribe to the channel if you've not already done so and if you're enjoying this content please consider buying a coffee link is in the description thanks again for watching and we'll see you in the next video

Channel: BugBytes

Views: 4,637

Keywords:

Id: 0Ez-2xjQyJo

Length: 24min 47sec (1487 seconds)

Published: Tue Jan 16 2024