How to Create a Node.js + Next.js Project | Express Backend + Next.js & React Frontend

hey guys welcome back to a new video in this video I'm going to be showing you guys how you can combine a nexgs front end with react with an Express JS backend so this tutorial is just going to show you how you can um create a nexjs project and Link it with a node.js backend and previously on my channel I've made videos where I've shown you how to do this with flask and Python and before that I've shown you how to do it with just plain react and node.js along with plain react and Python and since this was a video that has been requested by a lot of people I figured that this would be a way to show you guys how to do that so to get started I have my terminal opened inside of this directory called nexjs Express and I'm just going to go ahead and get right into it so first of all I'm going to create a server directory by doing mkdir server to create a server directory and then I'm going to create our client application and this is just going to be a nexgs app so to create a next.js app you're just going to do npx create next app and before I hit this I'm just going to show you what I have in my directory currently and all I have is the server directory that I just created so to create the next JS client side or the front end we're just going to do npx create next app and I'm just going to call it client because that's really all that we need we're just creating a plain nexgs front end with the project name being client so I'm going to hit enter and it's going to have some configuration options for us which I'll walk you through so it's going to ask you if you want to use typescript I'm just going to go ahead and click yes yes lint yes tail and CSS yes Source directory no app router I'm going to go ahead and click no even though it says recommended because a lot of nextgs projects are still utilizing the previous Pages router and I think that the pages router is a lot easier to follow along with so I'm just going to go ahead and click note this one and customize the default import Alias I'm just going to click no because this is not really required for this video but if you guys would like to do that you can you just need to have your Imports listed differently so I'll go ahead and give it a few seconds and it's going to create our front end for our project and while it does this I'm going to go ahead and open up a new terminal Tab and here we have our server directory as well and inside of our server directory I'm going to go ahead and CD into it and we're going to do npm init and this will allow us to create a package.json file so the package name we're just going to leave it as server version 1 description we can leave it blank entry point I'm just going to either you can leave it as index.js but I prefer to do server.js so I'll just hit that test command we don't need any at the moment git repository this is optional keywords optional author I will support my name license I'll leave it as the default which is ISC and it's going to ask is this okay for my preferences yes so I'll just hit enter and now we have a package.json inside of our server directory and we also have our next JS front end created um under the name client so what I'm going to do next is open this up inside of vs code and here I'm just going to go ahead and make my size of it larger so that you guys can see and now what we're going to do is go ahead and move on with installing dependencies for our backend to set it up and then we're going to go ahead and proceed with connecting our client and our server so to proceed with our server setup what we need to do is I'm going to open up my terminal here and I'm just going to go ahead and CD into my server directory and inside of here if we go to our package.json file we specify that the main entry point for our server was going to be at a file called server.js now for you it might be different depending on what you chose by default it would have been index.js but I just prefer using the name server.js so what we need to do is first create this file right here so whatever your file name is over here you're going to do touch server.js now touch is a Mac in Linux command so if you're on Windows then you can just go ahead and use the command for Windows to create a file or you can just create a file like this but I'm just going to do touch server.js to create a server.js file inside my server directory and next we're going to need to install Express so to install Express we're just going to do npmi Express if you give it a few seconds it's going to install Express and after that you should have a node modules directory along with packagelock.json after this we're going to need to install node mod so that we can run our server in development mode and the reason that we're going to be needing nodemon is so that uh while we're in development mode if we encounter any errors with our server while setting it up we'll automatically have those errors displayed to us and we'll need to restart our entire application so I'm just going to do npmi node one I'll do hyphen hyphen save hyphen Dev to make sure that this is saved as a Dev dependency all right and next we're going to need to go into our scripts and we're going to create two new scripts and if you're not familiar with node you need to create a start script which will start up your server so if we are in a production environment we'd be running this start script and to run our server as if we were in a production environment we would just do node server however in this video since we are developing it we're going to be using node mod which is why we installed it because currently we are in a development environment so we're just going to do Dev and then node non server and you understand what these mean when I go ahead and actually use these scripts to start our server but now that we have our server configuration and dependencies complete we just need to go ahead and build our backend API so to begin creating our backend API I'm going to need to First import Express so I'm going to do that with cons Express equal to require Express and then we're going to need to create an app instance so we're going to do that with const app is equal to require or Express we're just going to call Express to create that instance therefore our Port I'm just going to be upon support is equal to 8080. now if you guys would like to have a separate Port you can do that as well but just to keep things simple I'm just going to go ahead and with 8080 because that's what I've done in my previous videos as well next we're going to need to create our actual API route where we're going to be fetching the data from so I'm going to do app.get forward slash API forward slash home I'm going to take in a request and response and here I'll just do res dot Json message hello world and if you've seen my python video this is the same message that we did in that video as well so I'm just going to keep things the same from that video so now we've set up our API route now we're just going to need a way to run our application so to run our application we can just do app.listen and we're going to be listening at port 8080 which we've specified right here and once everything has begun we're just going to do console.log uh server started on Port and then pass in our report and now to run our server I'm going to clear my terminal here so you guys can see uh if we do npm start this is going to call node server here and what this will do is if we make any changes to our server file we would have to restart our server by doing control C and then restarting it and that would be a very uh big hassle to do so that is why we have node mod installed and for this for the purpose of this video we're going to do NP online Dev so that it will call nodemon server and this will basically allow us to make any changes that any changes into our script but it will also restart the server automatically instead of having us do it uh manually so if you do npm run Dev it'll say server started on Port 8080. so if you go to localhost for 8080 it's going to give us cannot get forward slash and that's because we haven't created an API for this uh endpoint right here this forward slash endpoint so what we need to do is go to forward slash API forward slash home because that's the only endpoint that we have currently and I'm just going to paste that route in and if we go here you can see that the message that is returned by this route is Hello World So currently we have our backend API set up and now we just need to go ahead and create our front end and make it fetch this message right here and then later on I'm going to show you how you can mess fetch other things as well so now to proceed with our client I'm just going to open up a new terminal and I'm going to CD into my client directory and inside of here I'm just going to do npm run Dev which is also a script here to run our client in next js's development mode and if we go to localhost for three thousand and if you give it a few seconds to load you'll see the boilerplate next.js um front end here now what I'm going to do is remove all of this and just have it display a plain white screen so that we can have a lot more freedom when it comes to displaying this message from the backend API so I'm going to go into the Pages directory and for this video we're not going to be doing anything with this API directory so you don't have to worry about that this app.tsx will just return the app this document is just for the HTML document to be rendered onto the Dom and index.tsx is the file that we're going to be writing our code inside of so I'm just going to do command a and then remove all this code here and what I'm going to do next is rfce and this will create a function component in react and if you want to know how I did that if you go into your extensions and look up es7 and look at the es7 plus react Redux react native Snippets you can install this so that you can get the snippet to create the functional component like I did there so here what I'm going to do is save the code and if we go back you can see that we have a black screen with index written in light now I prefer to have a white screen just because I think it looks a lot cleaner so I'm going to go ahead and go into my Styles and inside of globals.css I'm just going to remove all Bill code that is below the Tailwind configuration so I'm just going to go ahead and save this and now you can see that we have just index written on here and next we're going to be doing is fetching this message from the back end and displaying it onto our front end right here so to begin fetching from our back end we also need to install cores in our back end and set that up so that we don't uh encounter any cross origin issues so to do that I'm going to go into my server.js file and there is another dependency that we need to install so if we go back into our server directory and do npmi cores this will basically install the cores dependency which will allow us to receive API calls to our backend so once you have installed cores by doing npmi cores you're just going to want to import it by doing cons cores is equal to require course all right once you do this you can just do app.use cores use this middleware function to make it so that our app can accept requests from our front end so next I'm going to go ahead into our index.j DOT TSX file and here I'm going to import use effect and use State now I have videos on both use effect and usage so if you don't know how these work I recommend checking my videos on them which I'll link in the top right hand corner of the screen and we're going to be using use effects so that we can run a side effect in our front end so that on the initial load of the page we are able to make an API call to our back end so that we can display whatever response is sent by the back end which in this case is this message to our Dom and you state we're going to be using so that if we ever have any sort of data that we are retrieving in an array format which I will show you later we're going to be using it to store it and also to display the users by using for each Loop so I'm going to go ahead and just fetch our API by using use effect so to do this I'm just going to do use effect and then do Fetch and if you don't know how to fetch apis in react or don't understand it I also have a video on that which I recommend you guys do check out if you're unfamiliar with the topic and we're going to be fetching the URL right here so I'm just going to go ahead and copy this and what this will do is let our front end know that we're going to be fetching data from this URL in the back end so once we fetched it we're going to get the response and put that response into Json and then whatever data is in the Json we're just going to console.log to the console and I'm going to pass in an empty array at the end of this use effect so that this request only runs once and does not run multiple times so I'll go ahead and refresh my front end and if I do right click inspect and go to our console you can see that we have an object and this object basically contains the message hello world now our goal is to display this onto the Dom so how would we do that exactly so here I'm going to create a variable with use State and I'm going to do const message set message and by default it's going to be set to loading and the reason that it's going to be set to loading by default is that while the API is being fetched that means that the data is currently loading so I'm just going to display that message onto our Dom and right now it's going to be set to loading because we are doing nothing to change the state of this message variable and what we are going to do is change the state of this variable once the data has been fetched so we're just going to do set message to data Dot message and what this will do or response.data Dot message whoops we're actually just a bit about that message and what this will do is basically take the message object from the back end this right here and set the value of our message variable to data.message so if you go back and look you can see that we have displayed hello world and this is specifically coming from the back end so if we refresh our page you can see that for a split second it displays loading and the reason that it displays loading is that is because the API is still being fetched and once it was fetched we not only log the data to the console but also set the message that is sent in that data to this message State variable and are just displaying that variable with this one line right here now I'll show you how this can be changed dynamically now if I go here and do like this video you can see if I refresh the page it's going to change to like this video because the message in the back end has also changed and the app is making a API call to the back end each time that it loads which is why you get like this video displayed onto the Dom now next I'm going to show you how to fetch an array from the back end or just the display the contents of an array in order so to do this I'm just going to go into my server and here I'm going to make a new um key I'm going to call this people and people is going to be an array consisting of Harry Jack and Barry if you'd like to have more creative names drop them in the comments so if you go back to our back end here and refresh it we can see that we have a new key consisting of Harry Jack and Berry assigned to the people key now if we go into our front end and refresh we get the array as well and our goal is now to display Harry Jack and Barry below like this video so to do this all we're going to do is again go to our index file and just create a new state variable and you pause people set people and set it to you state of an empty array because while the data is being fetched this array is going to be empty next we're just going to do set people to data dot people and what this will do is basically by default our people array is set to that and once fetched it's going to be set to Harry Jack and Barry okay or Harry Berry and Jack however the order was so next we just need to display these names onto the screen so to do that I'm going to first create a new div tag I'm going to move this message inside this parent div and to display them we can just do people dot map I'm going to take in uh I guess person and then the index and we'll just do a div like so and the key is going to be set to the index and we'll just have person here if we go ahead and refresh our page you can see that we get Harry Jack and Barry from our back end and you can also see that they are being fetched because the console log statement is also displaying them and we can also get rid of this console.log since the code is working and if I were to change the name so let's say instead of Harry I put in my own name and uh whoops oops refresh the page you can see that my name is popping up and so whatever data that we pass in to our backend that's the same data that's going to be retrieved by our front end and displayed and we won't really have to do anything aside from calling the API and creating these State variables to display or to keep track of the data that we have to display onto the Dom so that's basically how you can connect your node backend server with your front end in next.js which is utilizing react and fetch the backend API to display contents to the front so that basically concludes this video and just to recap over what we did we first created our client and server directories and set up our projects inside them and then we installed our necessary dependencies to create an Express server for our back end and then we created a back-end endpoint that would return specific data that our front end would then retrieve using the fetch API which was stored inside of a use effect which would allow our front end to get the data from our backend on the initial page load and only do it once with this empty array over here and then we're simply getting the data storing the storing that data in these State variables and then using those State variables to display the data onto our screen so that's basically it and if you were confused about what this index does if we go into our server the index this first element is zero one and two so first element in zero second is one third is two and what this index does is simply store that index as a key so yeah and that's basically how we created um our flat or our next JS and node.js project so I hope this video was helpful and I hope that I was able to clear up any sort of confusion that you may have with setting up a project with not only a nexgs server but also a node.js server and if this helped make sure to leave a like on the video and subscribe to the channel if you have any questions or comments please leave them in the comments below and I'll try to reply to you um when I have the time but yeah I hope this video was helpful to you and if it was make sure to stay tuned for new uploads and as always have a nice day and I'll see you in the next one foreign [Music]

Channel: Arpan Neupane

Views: 40,703

Keywords: web development, nodejs, react, react tutorial, nodejs tutorial, what are APIs, what are api's, programming tutorials, express backend, react frontend, how to learn nodejs, how to learn react, how to learn typescript, how to build api, how to set up node and react app, node backend and react frontend, how to set up express with react, how to set up react with node, javascript tutoria, frontend and backend, node and react tutorial, nextjs, nextjs and nodejs, next.js and express

Id: 5Vxx5UkjV4s

Length: 22min 41sec (1361 seconds)

Published: Wed Jul 19 2023