NextJS Tutorial - All 12 Concepts You Need to Know

in this tutorial I'll quickly give you an overview of the most important features in nextjs so it's actually a really exciting time to learn nextjs because the latest app router is a game changer for web development you can now build full stack applications with just react you don't need a separate backend anymore so I have identified these 12 Concepts as the most important Concepts that you need to know and I have created a simple demo project here which showcases all of the main features in practice now I will go through it very fast so if something is unclear that's totally fine this is just meant as a quick overview of all the main Concepts but how do we even create new nextjs application while I just created a simple folder here called example and I've opened that up in my code editor here and it's currently empty and you can run MPX create next app and if you want the latest one you can say at latest now when you do this it will actually create a new folder in here but I just created an empty folder for my project so I just wanted to just put all the files directly in this folder so then you can put a period in here it's going to ask me a bunch of questions and here it will guide you through a setup I just go with the default so yes I want to use typescript es lint tailin CSS is the default as you can see in nextjs would you like to use the source directory and actually yes I would like that and of course we want to use the app router before we had the pages router and we don't want to customize the default import so this is so that you don't have that/ do/ in those import file pads and this is going to be a nextjs boiler plate all right I'll quickly run this as well so we can see what this gives us all right so now our app is running here this is the default boiler plate that you get so this is actually the homepage and you can find that here in the source directory and then in the app directory and that's going to be this page. TSX file we'll talk more about that in a second but here you can see there's usually Big File here A bunch of boiler plantes here I don't really like it that they have so much boil plant and typically one of the first things you're going to do is you're just going to remove all of this boiler plantes here all of this markup because we don't want to have this homepage we want to have our own homepage of course and this is all styling from till and CSS which we will also quickly talk about later and we can also remove this so typically one of the first things you're going to do is just remove a bunch of boiler plates so then here in layout this is the root component we'll talk about this in a second but basically all of your pages are going to be the children here and they're going to be wrapped by this body tag you can see the default font is the inter font which I like it's it's a nice font professional font we also have some metadata here and it's actually also linking to a CSS file so if we go into that CSS file you can see there are also some default Styles here so we do need to keep these if we want to use Tailwind but the rest I typically also just delete now we will have a blank page essentially and this is what you're going to get with a fresh install of nextjs so routing and navigation so here I'm on the homepage and I can click on posts here and I will go to for/ poost so how do you do that in nextjs so we're going to have a source directory here and then in there we will have an app directory and in here you basically determine all of the routes of your application so here in the root you're going to have this page. TSX file that's going to be for the home page so if I open that up you can see in this component I just have a bunch of markup here now we want to have a forward slash posts rout so what you do is you go into the app directory and if you want to have for/ posts in the URL you need to create a folder actually called post and then you have another page. TSX file so we have the homepage and the posts page but what about the individual posts because we could have thousands of posts and what we want is something like posts forward slash and then maybe the ID of the posts right maybe you know 8,400 something so then should we create a folder for each one of those pads and the answer is no so you can just create one and this is a dynamic route as it's called you write that in square bracket so here whatever it may be that's going to be here for this ID route and then you can have another page for that right so then here if I click here for example on this one this has an ID of one and that will come from this page. TSX right and then if I go back and if I click on another one this one has an ID of two and this will use the same page. TSX file right so this is called a dynamic route so here we have the pages and if I make this a little bit wider you can see that I have restricted the width of this and what you will also see is that whenever I navigate between the home and the post rout there is a header and footer and they stay the same well that's what you would do in the layout file so the layout file here this is going to be the root of your application so this is where it all starts essentially so here we have a so-called root layout and then you have children in there so these are going to be the page right so this is going to be the homepage if I go to posts this is going to be the post and you can see that on top of there we have this header component and Below there we have a footer component so every page will essentially be sandwiched between this header and footer and then I also have this container to restrict the width on every page if we look at the header you can see I have two links there and I can click them to navigate I'm using the built-in link component in nextjs this will essentially just render an anchor tag on the page and so traditionally with an anchor tag if you would use that you would basically get a whole new page however with the nextjs link component you will not send a new request to the server nextjs will manage all of the routing here client side and in production this link will also prefetch the page when it's in view nextjs also makes it really easy to deal with metadata in your project so here by default in the layout file you can configure the metadata right here so the title is what you will see here in the tab and that's also what you will see in the Google search rankings if you only have this one in the layout file this will be Global for your entire app if you want to overwrite it on some page you can export the same variable so also an export cons metadata and then just set a title specific for that page so then we get to styling you can see that I'm using all of these class names and they don't come from me they come from Tailwind CSS it is the default in nextjs when you create a new application now nextjs does give you this global. CSS file as well and here you can also write CSS like before so the main benefit of using twin CSS is that you don't have to come up with a separate class name because traditionally what you would have to do to style this H1 for example you would have to give this a class name let's call it first heading and now I would have to select it here and that's how you would style this traditionally now the downside of this is that every time you want to style some element you have to be creative and you have have to come up with a class name here how would I call it first heading or maybe just heading or maybe heading D- first right so you have to be creative with these class names and then you have to go to a separate file to style it so you also have context switching so till when CSS solves those problems if I remove this so here I can just use classes from Tailwind I can set the font size like this I can set the font weight if I now save here you can see this also works but I don't have to come up with some clever class name and I don't have to go to a separate file and before we continue I quickly want to talk about today's sponsor which is hostinger now by the end of the video I will actually show you how you can deploy your nextjs application to hosting your they're running a massive Black Friday sale right now so if you go to hostinger.com byrant you will be able to find this promotion and they've even given us an additional discount code so you can deploy and host your next JS applications for a very affordable price so here they show you the options you have and for example for their KVM 2 plan they are offering this for only $7 a month right so you're going to get 8 GB of ram 100 GB of disk space this should be more than enough for multiple nextjs apps even if you're including the database with them with for example SQL light so if you're already a little bit more advanced and you know about hosting and setting up a VPS you may also want to consider hosting your nextjs app on a VPS so the 12 months and 24 months are very attractive prices right now now it gets even more attractive because if we scroll down here you will also be able to add my coupon code so if you go here and you type B grad you can apply that and you get an even a more attractive price so if you're familiar with VPS hosting then check out this deal for your nextjs applications so nextjs also offers an outof thee boox image component and I'm using that here in the header for the logo um I actually wrapped it with a link component as well so then when you click the image you can go back to the homepage now this image component will actually just render an image in the HTML if you have a PNG image for example that's a very heavy image because it's not compressed however with nextjs it can automatically serve a webp version of that this image component will also help you make the image responsive because it will set the source set and some other attributes as well also sometimes with images especially if it's a big one it may shift content around right so if I had a big image here this may already be displayed but then the image comes in and shifts everything down and it's called content layout shift or CLS and it's one of the metrics that Google looks at when ranking your website so this image component also helps you out with that it can do it automatically if you have your image right here in the file system and what it will do is it will just set the width and height of that image or if it's an external image right here I'm linking to an external image you have to set the width and height yourself to prevent that layout shift now I'm using an external image here meaning the domain name here is different from my own website and nextjs will not automatically allow you to do that so you need to go into the next configuration file next. config and here you need to specify for images that you explicitly want to allow images from this host name if I comment this out and save now I will get an error invalid Source problem so it doesn't allow me to just use any external image in my app I have to make it explicit that I want to allow images from this host name this is for extra security so then we get to client and server components this is also a major Innovation so previously if you're using feed everything is a client component all the components all their code is shipped to the client and those components run on the client in the browser however these days we also have server components so these components only run on the server and that has certain benefits so the nextjs team recommends that now when you make a get request to fetch data that you do that in a server component so here on the post page here we are in a server component because everything by default in the app directory is a server component and all of these Pages therefore are also a server component and what you can do in a server component is you can just make a fetch call without use effect just directly here in the component function body I can just make a fetch call to some dummy Json website to get some dummy data here will give me a response I can get the data here and I can just pass that to another component now this component can then be a client component so what would happen is that nextjs behind the scenes will make sure that this data goes from the server to the client now the benefit of fetching here on the server in a server component is that this can be closer to the actual data source so if we have a database somewhere in the world we can make it so that this fetch happens close to that database another benefit of server component is that we can keep large dependencies on the server only if you're using a third party that is pretty heavy for for example this syntax highlighter this is a big dependency it's a big third party package so you may have some code block that you want to style right so here maybe on every page we want to have some code block and I just have some dummy text here and the syntax highlighter will just add some colors for that code and that's called syntax highlighting and it's similar to what I have in my code editor actually right so you can see the return keyword has a reddish color here and that's syntax highlight so that we can easily see what the code does basically just adding some colors but this is a third party component and it's huge but it's not a problem because because this is a server component so this will only stay on the server and the result of this render output will be sent to the client only not all of the dependencies here and so on the client this component won't need to render it can already be rendered on the server with the syntax highlighting and the result of that will be given to the client so if I go to this page right now if I refresh here you can see I have 8.2 megabytes of resources on this page so this syntax highlighter is not shipped to the client right now but what if we make this a client component and we can do that by simply adding use clients at the top so now that this is a client component this rendering will happen on the client and to make the rendering happen well it needs this dependency so now if I refresh you can see we're getting 12.5 megabytes of res right that's much more than before if I comment this right so now if I save here and if I refresh we're getting 8.2 megabytes of resources so this is one more benefit of server components you can keep large dependencies on the server and there are other benefits as well so then we get to server actions and maybe this is even the biggest innovation in next J ad so so we can do our get requests in server components but what about those other requests those post put and delete requests and for these requests we can now use server actions so with server actions we're trying to replace those post put and delete request so what I did here is I just added this form on this post route so we can actually submit a new post here and I also added a database so I'm getting all the posts from my database here in posts and that's what I'm passing here to this post list right so before I had a fetch call here to just on dummy Json but I can also just interact with my own database in a server component right I'm using Prisma here as my so-called om don't worry I'll explain everything and it will just get all of the posts out of my database and it will still pass that here to posts list so there are already three posts in the database and that's what we're just getting from the database and just passing to post list here but now I added this add post form that's what we see here to add a new post so if I go there if I just scroll down for now you can see the the markup here is pretty standard but there is one special thing here which is that for the action attribute here we have passed an add post function and that's actually a so-called server action so if we scroll up here you can Define that here in the function component body or you can put it in a separate file so this function is just a function just like any other function except you add use server at the top so this function will only run on the server and what you also get here is the form data so if you pass a function here nextjs will automatically give the form data to that function so you don't have to collect the form information yourself anymore and what we're doing here is we're creating a new Post in our database from that form data we'll talk more about how Prisma works and how all of that works with databases that's what we can do now is I can say test for the title and let's say body is also test and now if I click on submit new post well we don't see anything happen but if I now refresh you can see that at the bottom we actually have a new post now and before I would have to create like a/ API route and we would do something like on submit and then you would have handle submit and in that handle submit you would have to do e. prevent default to prevent that weird submission that the browser does when you submit a form you would need to get the form data or maybe you have the form data in state and then you had to create a whole separate SL API SL poost to just send the data to some route and then you would have to create that actual route Handler and then in there you could actually add it to the database so this way client and server were two very separate things and you had to do a lot of work to cross that boundary of going from client to server well now that boundary has been abstracted away by nextjs with these server action so I don't have to create a whole separate SL API route I can just create a normal JavaScript function and I can mark it with use server so it only runs on the server and next JS will make sure that the data from this form on the client will be sent to the server and specifically to this function which will then add it to the database and there are many other benefits of this for example I had to refresh to see the new post right but here it gets even cooler because what you can also do is use revalidate path after you did the update in a database what we're specifying here is that after this update in the database we want to basically re-render this posts R right so that's this component so this component will be rendered and so it will get all of the new posts from the database and we just added this one here so then it should get the new one as well so I will say another test testing now if I click on submit new post you can see that immediately or very quickly at least because it's all local here it gets added to the list I don't have to re TR so what happens actually is this component gets rendered and the result of this will be streamed into our application here and that will contain the new post without any refresh and if we want to add a loading indicator well that's very easy to do as well so here we have a submit button we get a hook here from react but it works in nextjs called use form status so here we can see if it's pending or not basically is there a server action running here and this needs to be a client component so we have marked this as use client and then what we can do here here is we can disable this button when it's pending when it's submitting we can say it should be disabled because we don't want the user to submit it twice and then with Tailwind it's actually super easy if we can select this element in the disabled state so when it's disabled give it a bit of a lighter background color so if I now try this again if I say very cool and then I say yes and now if I click submit new post and that was a little bit too fast so I'm going to slow down the server action a little bit so here I'm just going to make it wait for 2 seconds right so this will just wait 2 seconds before continues here so now let me try this again another try yep so now if you take a look if I click here you can see we have this loading indicator and after 2 seconds it automatically updates the UI as well right so server actions including the hooks that work with them are in my opinion the biggest innovation in nextjs and by the way we practice with them a lot in my react and nextjs course so I have a complete course on react and nextjs highly recommend you check it out if you want to become a professional react or nextjs developer all right so then we get to suspense and streaming and this sounds very complicated but it has to do essentially with loading so now I'm here on the homepage if I click on post now you can see it takes a little bit it needs to fetch all of the post and so if we go here to the post page it needs to fetch all of these posts from the database and we're awaiting that and only then will it return all of this right and it's the same when I go to an individual blog post and so if I click on let's say uh this number four test you can see I click now but now I had to wait a little bit and while I was waiting I didn't see any loading indicator so what I can do is I can add back my loading TSX file and this is also a special file just like page. TSX is a special file loading. TSX is also a special file because what you're telling nextjs is basically this is what you want to have as a fallback while something is loading so if we add this here and now I go back and you can see now when I go to post you can see there was a loading indicator there if I go to any of these individual block posts you can see there's also going to be a loading indicator there so this is what you want to use most of the time when you have some kind of async await you're awaiting some asynchronous action usually that means data data fetching and you want to show some kind of loading indicator what does that have to do with suspense and with streaming if you add that loading. TSX file for example here we add it at the same level as this page. TSX file for/ poost well what next us will do behind the scenes it will take that posts page and it will wrap that in a suspense component and the fallback will be that actual loading file right so this is actually a react feature but next you as abstracts this away for you with this loading. TSX file one downside of this is if I go to posts here the whole page will now be blocked because if I look here we are fetching the post only for this component here right and we're awaiting that and while this is going on we will see that loading indicator but that also means that we don't see this H1 all post so when you go to that route you will not immediately see all post and let me actually show it even better by just adding some delay here as well of just one second right so this will just add one extra second in waiting so now if I go to post you can see it's just loading everything here it's blocking everything we only need the data here for for this component everything else will also be invisible until that is complete until we actually get the data even though we don't need the data for this H1 and I think this is not a good user experience because if they go to this page I immediately want to show this H1 to them so that they know they're on the right page but now we're not going to see this H1 because of getting all of that data from the database is blocking everything on the page and maybe we have other components down here as well that have nothing to do with these posts but they would also be blocked we would not see them until this getting data from our database has been complete so what we could do is we could move this getting data or fetching data we can move it out of this component and we could actually also just move it down into this post list component itself right so just to quickly show you how that would look like right it's just the exact same this is also a server component so we can do that no problem right and now we can remove the props because it won't receive these as props anymore I can remove all of this and I will just import this so now it just fetches the posts itself so we don't need to pass the posts down here okay and now what I can can do is I can remove that loading. TSX file as well okay so I just removed the loading. TSX file but we were using that so we could show a loading indicator while there was some data fetching going on right but we didn't want to show the loading indicator for the whole page we only want to show it for this post list component so you can actually also yourself manually wrap this in a suspense right this is just a component and you can just put that post list component in there because this is an asynchronous component and it will be suspended basically until that is resolved and until it has been resolved until the data fetching has been complete we can show a fileb back right we can just say loading dot dot dot so now if I go to homepage here and now I go to post you can see all posts immediately rendered on the page and a little bit later we see the post list but now it's not blocking the entire page right so if I refresh here we're just going to show loading dot dot dot initially and when this is complete and this has been resolved the result of this will be streamed in right so we don't have to do a refresh or anything next Js will make sure that when this render is finally finished it will just be streamed in right and that's basically suspense and streaming right so I think that's pretty cool pretty uh Innovative as well now I will quickly undo this and I will just stick to the loading. TSX file for this tutorial all right so then we get to caching which is closely related to static and dynamic rendering so what does all of that mean so by default nextjs actually pretty aggressively caches your application and it's probably the most complex Topic in nextjs so this looks very intimidating but you don't need to understand that right now uh this will come with a lot of experience and building nextjs applications you will build an intuition for which cash you're interacting with by the way I'm getting all of these infographics from the nextjs documentation now to give you some intuition here for caching I just Chang this back to making a fetch call to the dummy Json so if we say limit is five we will just get five block PO for example here when I go to post you can see there's a loading indicator initially but what if I now go back to the homepage and now I click on the forward button again you can see it's instance there was no no loading indicator right so if I go back and forth It's just instant it doesn't have to send a request to the server and then run run the server component again fetch the data again there is already a client side cache here in the browser managed by nextjs called the router cache which will make sure that you have instant back and forth button now it's not cached forever so by default this will only be cached for 5 minutes that client side cash will also be gone if you just refresh here so now if I go back you can see there's a loading indicator again so that's all client side but next JS also manages two caches on the server so to show you that so here right now it's always fetching five block posts right so that's what we see here if I refresh it's always five blockb now to Showcase those two caches that you will get on the server let's actually make that a random amount of blockb this will just give us a random number between 0 and 10 so then we can use this as the limit here and I'm actually adding plus one at the end here so it's always going to be at least one so now it's going to be between 1 and 10 so now if I refresh here you will see that every time I refresh or almost every time it will have a different amount of blog posts that we are fetching here right so here there's always a different amount which proves that every time I go there this component is rendering right because otherwise it would stay the same when I go there it's running when I refresh again it's running again so this is called Dynamic rendering which basically means there is no caching here because it's rendering every time I make a request right so that is dynamic rendering now that is only during development right so development is when you do mpm run Dev so in nextjs when you do a clean install you're going to get a couple of scripts here so these three are the most important here so most of the time you're going to use this one to spin up a Dev server and do development but eventually you want to run a build to optimize everything right Minify your project make it as small as possible as performant as possible and the result of that build is what you will actually use in production now you can run that build here locally I can just say mpm run build and this will give me the result of a build here somewhere in the file system and if I quickly want to run that build bu here just in my own browser I can use this one now this is relevant because here when we go to the Post page this is dynamically rendered but when you go to production nexts will make this statically run so basically it will be cash so let me prove that to you I'm going to run that build I'm going to say mpm run build and then it's finished and it will actually give you some information here so you can see here at the bottom it says static and it's saying something pre-rendered as static content so here you can see in that final build which we by the way have in our file system here if I scroll up you can see next so here it will have the result of that build and what do we have in there well nextjs will tell us so we have the homepage route it will by default also create some underscore not found Route and then we have our post route and then we also have our post with the dynamic ID route right so nextjs has really been built around route right so before maybe you had a mindset of components when you get to nextjs you need to get more into the mindset of Route so here we see that they also have different symbols here so we can see that the empty circle here is a so-called static route which means that during this big build nextjs was already creating the result of this right so during the build it was running this component and the result of that will simply be served every time that's what it means when it's pre-rendered as static content so it will not run whenever you go there it will only run once here during the build and now when I go there so let's actually spin up our server again but this time with that build so npm Run start so now when I go to my SL post right so now I'm running the production build and in this component remember we're getting a random number and then we're fetching a random amount of block post so what you would expect maybe is that when I refresh here that every time it would be different but no it's actually the same every time I refresh right you can see I keep refreshing here it's always the same because next to S will just render that route basically just this component here including child components it will just render all of that once during the build and the result of that will be served whenever you go there it will not be rendered here right so in production this is going to be static during development it was Dynamic so whenever you make a request it was running all of this again but what if we also want to run it every time in production well what you can do is you can go here and you can say for this route you can export a con it's called Dynamic and you can say this route also needs to be dynamic force it to be dynamic so now if I save here now I have to rebuild as it's called right so mpm R build and now when I look at the result of this build you can see we now have this l icon for the forward SL poost route as well so let's actually run this okay let's try it out now if I refresh you can see every time I'm refreshing here it's getting new post now it's completely Dynamic which means every time you make a request it's going to render that component and that's going to be true for everything in this route now so with this setting we're setting it for the entire route so also child components here they will now also be dynamically rendered every time you make a request so if you want to be a little bit more granular you can say for this fetch call only only this one should be dynamic so you can actually go into this fetch call and you can specify here something this is not something you can do outside of nextjs and what we can say here is actually cash no cash right so that's how you can opt out of that aggressive caching that nextjs done but for this use case for a website like this I would actually use the C because for post well this is not going to change very often we may add a post at some point but most of the time this can just stay the same there's no need to render everything here so I wouldn't use cash no cash here I would just keep it statically rendered which means every time we go there it will be the same but what about when we actually do have a new post and it actually should show that new post well you can also specify something else here so here next and then we can say revalidate so with this option it means it should be cash right so every time I will refresh it should just be the same but after 1 hour right so 3600 seconds it actually should fetch new data again right so after 1 hour if you then make a request it will actually render and it will actually make a new fetch call so on the server side there are actually two caches so here we make this fetch call and the result of that will be stored in a so-called data cache and then there is also the full route cache so basically all the components of this route here will be rendered and the result of that will be cached on the server as well so caching and this static and dynamic rendering these are the two most complex Topics in nextjs so I don't expect you to completely understand this right we do practice with this in my course as well so then we get to middleware so middleware is something that you can run before the request hits the server so for example if I refresh here there will be a request to the server and right before that request hits the server we can already run some codes maybe check if the user is logged in so you can create a middleware TS file and this needs to be directly here in the root of the app directory and this would be an example so here you can export a function we can call that middleware and it will get that request right so middleware allows you to hook into that incoming request before it touches anything else on the server you can quickly run some code so here you get the request and we can type this as a next request and the most common use case for middleware is authentication so here we can check if the user is authenticated right so here I hard Code false but in the real world you may want to use next o or what I recommend is actually a third party for authentication you can use something like kind to deal with authentication so then you will get some result if if the user is not authenticated you can redirect them and otherwise you can just let the request continue and you can also match for which routes it needs to run this maybe not for all routes but maybe only the dashboard and the account pages should be protected now I quickly sneaked in number 11 here because I also quickly want to give you an overview of a typical folder structure in the modern xjs app so if I open up my sidebar here so this is an example of a full stack application because I'm also using a database with Prisma so what you see here is always a bunch of configuration files usually they have pretty strange names like eslint RC Json they are often also in different formats right so this is in Json format uh dog ignore is a different format uh this one is in JavaScript format this one is typescript so a bunch of configuration essentially then we have a public folder so here's where you could use images and static files that you could reference in your code but not a fav icon so if you want to use a fav icon you can go into Source app and here you can actually just create a file called fav ion. Ico and nextjs will actually use that file as your F icon so here by default you actually get the for sale logo so this is another special file and there are other special files as well that we have not seen here yet like a robots.txt file you can just add that here in the app directory and nextjs will pick that up other special files are for example error. TSX so here we have loading but maybe there's also an error there's also a special not found file here in nextjs this can be useful for example here on the ID page here on the individual Blog Page what we are doing here is we're trying to get this ID from the URL and next chance will actually give us that here in Pam so with these page components you get pams because here we have square brackets ID and then in there you can get the ID and so it's called pam. ID because we called that ID here in the folder so you can get whatever you put here in there and then we can actually fetch the post that is of that ID now here in the real world of course what people could do is they could put in some gibberish here and if it does not exist this API will still return an object but it won't have a title it won't have an ID so here we can just check if it doesn't have a title we know that there is no related post found here so what you can actually call is a not found function from next JS which will automatically show this component so if I do this I press enter here you can see the post was not found right so there are these special little files that come in quite handy so that was a lot to take in don't worry if something is unclear that's totally normal because it's just a quick overview now I do want to mention I have a complete course on react and nextjs in which we will also build some really nice projects including one that's actually quite similar to this one so if you want to see how all of this fits together in a real world application you want to see how it's built from absolute scratch then highly recommend you check out that course links in the description so we have to talk about a production build and the options you have for deploying so first of all what you could do is you could take the entire app and just create a bunch of HTML CSS and JavaScript files from that this is called a static export and you can do that by going to the next configuration file you only have to specify output is export and when you do a static export you're going to lose a bunch of server side features so one of them is actually this image optimization so when you do this you will get an error because we're using the image component or you need to make it explicit that you will just say unoptimized true and now when you run this build command what we've seen before you will get a new next folder here which will have an HTML file for each route and it will have some CSS and JavaScript files so just a static asset that you can host anywhere you want that will not be some server in the background servicing request so that's something that you could do but you lose a lot of those benefits that you get the next JS right so things like server components and server actions will not work the same so instead we do want to have a server running in the background a no JS server so typically you don't want to do this and we do want to optimize images now for hosting it may be good to know that your next JS application is actually just a nodejs app so anywhere where you can run nodejs you should also be able to run a nextjs application now if you're a total beginner you may just want to go with one of the managed platforms like for sale these are the popular options now those managed platforms typically do at a higher price especially as you start to scale so if you're already a little bit more advanced and you know about hosting and setting up a VPS you may also want to consider hosting your nexts app on a VPS now whatever option you pick for deploying typically you do want to push it to GitHub first so what we're going to do is we're going to create a GitHub repo here I'm going to say new repo I will call that cool app let's say I will make it public and then I'm going to create the repo so now it's ready for us to push there now before we actually push to GitHub I do quickly want to talk about environment variables so if we look at at EMV here I only have this one and this is what you're going to need if you're using something like Prisma and this is simply necessary for Prisma to work now this is not really a secret so it's not really a problem if somebody else sees this but we still have it as an environment variable and we also need this in production so this actually needs to be included in our repository so when I push to GitHub this actually should be included now if you have some information that actually should be a secret nextjs recommends that you create a. local file and this is where you would actually put your secrets and you can also see that this file name is grade out and that's because by default in the do getting Nord that you get when creating a new nextjs application. local is already included here and so it's important that you understand environment variables so we also talk a lot about this in my course and let me close this as well another thing that I want to do here also has to do with the database which is when we are going to run a build we also need to configure something here for Prisma so we need to say Prisma DB push and then it can actually build it right but this is all database Prisma stuff you don't have to understand this right now so now we're ready to push this to GitHub now it's good to mention when you create a new nextjs application with create next app it will actually already initialize a git repository here for your project so you don't have to run git in it because it's already been initialized so we just want to add everything so you can just do get add and then get commit and actually we can just copy all of this in one go and just paste that in one go and then when I go back here we should see our code so you can see now our code is on GitHub as well including this file which holds an environment variable which is not really a secret and not the .lo file right so that's actually how we want this to work and now we can decide where we actually want to host this now if you're a beginner you may just want to stick to the popular managed platforms like for sale but if you're already a little bit more experienced and you know about servers and you know about maybe VPS then I recommend you check out the hostinger deal so I'm going to show you how to deploy this to the hosting or VPS and it's going to be much easier than you think so when you buy a VPS you'll go through an onboarding process let me quickly show you how that works you can just start here and you can pick a location for the VPS so it's actually a Lithuanian company so maybe that's why they put it at the top but what I usually do is just pi to United States and then you get an option for how you want to configure the operating system so they actually do have some default uh configurations here under applications so you can actually just install this with Ubuntu and nodejs which may be something you want to do because nextjs is actually just just a nodejs application however I will go back here you may also want to pick a plain OS with no control panel but I'm actually going to go with this one with the control panel you will be able to manage multiple applications or multiple sites a bit easier so I'm going to go with Cloud panel here and Ubuntu so I'm going to click continue here I'm not going to install anything in addition right now and we need to set a password for that control panel if you want to use that control panel which we're not going to do in this video but that may be something you want to do if you have multiple applications on the VPS so I just typed in my panel password I'm just going to continue here all right so then this is another important part here we need to set up a password so that we can SSH into our VPS right so that's how you will access your VPS okay so I just added a password I'm going to continue here and we get a nice overview and now we're going to finish the setup now it will take a couple of minutes all right so after sometime it's ready it's finished we can immediately buy a domain or you can buy it later all right so then we have our VPS information right here and they will also give you this IP address which we will use to connect to our VPS as well as when we go to the browser to visit our application right now nothing is there so let's change that we need to log into our VPS with SSH to change things so here we have SSH access and here they show you what you can type in the terminal we need to run this in a shell or terminal so in visal studio code you actually have an integrated terminal here right so visal Studio code is not just a code editor they actually also put a terminal in there and if I kill this you can see for me it's the zshell because I'm on Mac on Windows this is going to be Powershell or CMD the command prompt but all the commands that we're going to run it's all the same but here you can see visal Studio code is not just a code editor it's an IDE it's a fancy word integrated development environment so there's much more than just code editing now for actually setting up our VPS I tried running all the commands in here but I run into issues when I do it here in Visual Studio code so I have opened up this Standalone terminal here and on Windows you can also just open up a standalone Powers shell so I'm going to type SSH and then it's root at and that's the IP address so I'll press enter here so here we have uh an additional security question I will just say yes all right so then we need to pass the password that we set up earlier so this needs to be the password not for your panel but the password that you passed for SSH access all right so I typed it although you can't see that here it's hidden but I will press enter here and I miss typed so maybe I should try again so I just typed it I'm going to press enter and finally we are logged in and you're going to see something about Cloud panel because I picked that panel if you didn't pick that you're not going to see that all right but now what I can do is I can say present working directory I'm in the root of this VPS and I can check the files in here and we want to run our app now our app is actually a nodejs app so we do need nodejs if I try typing note V you'll see that note JS is actually not installed here and we will also need a git so if I type git you can see git is actually pre-installed here so that's nice so what we're going to do is I'm I will first just install uh npm so we can say app install npm the node package manager all right so now we have mpm I can say mpm DV now we can install something globally called n just the character n and this will allow us to then easily install nodejs and uh install specific versions so you can actually just type n latest okay so now if I type note- Fe so now we want to run our nextjs app here on this fvps we will not run mpm run Dev but we will run mpm run start but it will also give you Local Host Port 3000 right but that will be on the VPS so what we want to do is when we just when we just go to our IP here right so when you type this in the address bar what we should do is it should route that internally to Local Host 3000 where our next app is running so to Route the traffic we're going to use engin if we actually say engin and check the version you can see it's actually pre-installed all right so I just made this terminal a little bit bigger and I also ran the clear command to clear everything so what we need to do is we need to configure engins so I'm going to say pseudo Nano which will open up an editor and we're going to create a file here in ETC enging sites available and then the name of our app so I will just call this cool- app.config or just con and this will open up an editor here and we need to paste a code snippet here and you can find it in the description as well I made it as easy as possible for you to deploy to a VPS okay so I just pasted this code snippet and what we're doing here is basically saying on our VPS when you go to that route and so just the homepage internally it should route that to Local Host colon 3 ,000 because this is where our next JS app will be running okay so then I can edit exit mode here I will save it yes and I will press enter here so just to check if that worked I'm going to say LS and then give me everything insides available and we now see a configuration file for cool app configuration for engins so we can do a symbolic link so here we can use cool- app.com and then we need to use instead of sites available we need to use sites enabled all right so if we do this now I also want to see what in this sites enabled path so we can just copy that and just check LS and now we can see we have added our cool app configuration so now we're going to create a directory for our application and for enging it needs to be a specific path so inar www and then we can give it a name I will also call that cool Dash app and then we want to go into that directory so right now we're still on the root so I'm going to change the directory into that path all right so now we're here I can say LS and it's currently empty so now what we're going to do is we're going to clone our repo from GitHub into this directory here so on GitHub on your repo what you can do is you can go to code and then here you get a URL you can just copy that and then here what we can say is get clone and you can just paste that address all right so I'm going to press enter here and you can see it's cloning into there and now when I say LS we can see that there is another folder here so let's actually change directory into there so we say cool app all right so now I'm going to do LS again and you can see all of our files and folders um are in here now our application also needs the note modules and since this is a big folder this is usually not included in your git so how do we know which packages we need to install well that's going to be defined in package.json and the only thing we have to do is actually just write mpm install and mpm will look into package.json to know what to install all right now when I ran mpm install I got an error and the the way to solve that is simply to exit the SSH and to Simply log back in again so if you want to exit it you can just press exit press enter and then you can do SSH root ads and then log in again now after logging in you need to make sure you go to this path right so what you can do is you can change directory directly to this path again right so far ww and then we have cool app which is just the name of the folder so then you can try running mpm install again in case you got that error it should work right so now the packages should be installed so now we can run a production build right so this is going to be an optimized version of our application so we can just say mpm run build and you can see it even sets up a sqlite database all part of the same app which is pretty cool we don't have a separate external database it all works within the app all right so at some point you can see the build succeeded and we can see some information about our routes now I just ran a clear command to clear everything and since we changed the engin configuration you want to restart engin so that that can pick up the new configuration so you do that with Pudo surfice engines restart and then your engin configuration should work and now we want to run that production build so you can just say mpm Run start and that will spin up up a server here and that's going to be on Local Host 3000 so now we want to check it out in the browser now before you type in Local Host 3000 remember that's on the VPS and the address of the VPS is actually this IP address so we have to use the IP address and you can just paste that right here and you can see our application right now is live on the internet we have successfully deployed a nextjs app to a VPS and you can see everything is working I can click around and everything here is working all right so maybe hostinger is something that you want to consider for hosting your next JS apps all right so that was a lot to take in if you're a little bit confused right now that's completely normal thanks for watching this video hope you learned something and have a nice day bye

Channel: ByteGrad

Views: 217,265

Keywords:

Id: vwSlYG7hFk0

Length: 44min 37sec (2677 seconds)

Published: Wed Nov 15 2023