Mastering Next.js: Deploy Your Next.JS App on Vercel in Minutes #nextjs #vercel

are you ready to take your next year's Project Life in this comprehensive guide we're diving deep into the world of application deployment showing you step by step how to launch your next year application on worsal the ultimate platform for hosting modern web applications in this project we deploy a simple nextjs user management web app which allows us to perform crud operations over details stored in a mongodb database we will cover everything from setting up your worsal account to configuring your next year's project for deployment we will also see how to check application log and debug any production issues that might come up post deployment if this topic interests you please consider subscribing to the channel as I post similar content every other week and with that said let's get straight into the video so here we are on the home page of wal.com and to start deploying our application first we'll have to click on start deploying here and to import a get repo you need to have a repository present either on GitHub gitlab or bit bucket since we have a push our code to GitHub I'll click on continue with GitHub you'll notice that a new veral account would be created that is connected to our GitHub repository you can see that it also picked up my git username now let's go ahead and import our project here so to deploy a new project we need to import an existing git repository or start with one of the templates we'll be clicking here on select a git name space and clicking on ADD GitHub account this will open a popup which is asking for the permission of installing worel on my person personal GitHub account now I can apply to all of my repositories which are currently present and the ones that I will be creating in the future or I can only install it for select repositories so I'll click on select repositories and select our newly created repo for user management which we named as user management nextjs then we'll scroll down and click on the install button I'll type out my password here to confirm access and then click on confirm password now we have successfully added our GitHub account now I'll be clicking on the import buttons so that our code base can be imported here onto verel and as you can see here it automatically picked up the framework preset that I want to go ahead with which in our case is obviously nextjs but there is a drop- down list of the other kind of applications too that you can choose to deploy by using worsal so we'll leave the framework preset as next sh itself we'll leave our project name to also the default project name now a root directory path is also correct since we've placed everything on the first level of the folder structure itself if for example let's say there were multiple projects present within the same repo you could have chosen to edit this root directory but we'll leave it as it is then we have build and output settings here we can choose to edit the build command the output directory and the install command so by default the build command is npm run build or next build which is correct we can choose to override the command by clicking on this toggle here and giving our own custom command but since next build is the correct one I'll leave it as it is also the output directory is the default nextjs output directory which is basically your next folder that we had in our application and then we have the npm install command and since we are using npm instead of yan or pnpm will be keeping it as npm install now the next option is to add environment variables now this is the important bit because we made sure that we did not commit our DOT files which was storing the secrets onto git and we had specifically added instructions in ourg ignore file to ignore any of the EnV files so worel allows us to add our environment variables here in the configure project tab itself we just need to provide the key names along with their values and they are encrypting the values for us so they will be stored as encrypted text instead of just plain text so you do not have to worry about the security of your environment variables because they will be stoled in an encrypted form so let's go ahead and add the important environment variables that we needed so first one is mongodb username We'll add the key name and its value app user then we'll add the second environment variable which is mongodb password and copy its value click on ADD now the third one is the mongodb host name for our mongodb host name we were referring to the other environment variables within the string value itself I'm not sure if this will still be supported on woral so just to be on the the safer side of things I'll put the actual values of mongodb username and password and then copy the entire string and paste it on our value field now you can choose to add any other environment variables too for example we had a dummy environment variable called next public secret which you can just go ahead and add since this is prefixed by the next public keyword this environment variable will also be accessible on the client so be very careful about what Secrets you're adding with next public keyword I'll click on ADD and that's basically the last step now all I have to do is simply click on the deploy button and worel will run the build stage check stage and then once the build is successfully done it will assign a new domain name to our application and we'll have an live end point to which our application will be deployed to but before we do that I'm going to make sure that I've actually committed all of the necessary changes to it and push them onto a repository let me quickly just do that I've committed all of the necessary changes and now I will be pushing these changes to our GitHub repository and as of now our application works without any issues with the correct environment variable so environment variables we've already injected let's now click on the deploy button and see what happens so you'll notice that the deployment has been queued and it's currently in the build stage now a lot of the logs in the build stage will be pretty familiar because what worel here is essentially doing is that it's first installing all of your dependencies and then running the next build command to generate a production ready build so as of now it was done installing all of the dependencies using npm install and now it's building your application by running the next build command again the logs will be pretty familiar we have already seen all of these logs being generated on the terminal when we used to run npm build now once the build is finished it will run the checks and then assign an endpoint to our application and as you can see the deployment was pretty fast and our application is actually deployed on the internet using worel with just a few simple steps now we can go to the dashboard for our deployment so let's go ahead and click on go to dashboard here on the dashboard you can check out the build logs again if you want to so the build logs will have the npm install and the next build steps logged out you can also check what all static and server s side Pages were generated and there were no checks that we had integrated into our build pipeline yet so there was no check stage but it did assign a new domain to our application which is basically this particular domain let's go back to the dashboard you can click on view domains to see what domain was assigned to our deployed instance which is basically this particular endpoint now you can see the status here is ready it's having a green color which means we're good to go and our deployment was created 4 minutes ago the branch that we deployed off of was main branch and this is the name of the last commit that we had made to our application let's go ahead and finally open our application on the web so we'll click on this particular link and click on visit so you'll notice here that the endpoint name that was assigned consists of the repository name which is user management next CH followed by some unique identifier followed by my GitHub account name it's a three level domain name so we have the unique identifier followed byval doapp so there are three levels to it so this domain name has multiple sub domains to it and that's just the default way versel assigns a domain name we can now check if everything is working fine and we can actually navigate around and perform actions on the deployed instance so let's go ahead and click on list users and we got the error that the serverless function timed out and it also said that our connection is working correctly and worell is also working correctly so there might be some other server side issue we can see what the actual issue was by going back to the dashboard here we'll click on functions and see the real logs that are application server generated we'll click on errors and you'll see here what error log was logged out on the server and as the error message says that the get API timed out so this is probably a database issue more precisely the issue is that we have not Whit listed the IP through which our database can be accessed with so you might remember when we defined the access rules for our database we only whitelisted the IP of our own systems and that's why as of now the deployed application is not able to conect connect to the database let's go ahead and fix that we'll open mongodb Atlas and sign in to our account and once we are logged in we'll go to the network access section here we'll click on ADD IP address and click on allow access from anywhere so what it does is that it will allow connection to our database from any system that has the correct credentials now this is not recommended usually what we do is that we only Whit list the machine on which we are deploying our project but for now let's test things out by allowing access from all IP addresses and click on confirm the change is being deployed and it's in pending state currently once it becomes active we'll test our application again now it's active let's go back to the homepage of our deployed application and click on list users again and as you can see now we are able to successfully navigate to the list users Tab and it's showing all of the details of the users that are currently present in the application we can also test the create user functionality so let's go ahead and create a new user so I'll create our usual test user John do and click on the submit button we got the alert back saying that the user was created successfully so we got a success 200 response back without any server errors now let's navigate back to our list users Tab and you can see here that John do was actually added to the database and can now be listed on the list users table and that was basically it we were able to successfully deploy a user management app on the web by using worsal if this video helped you please drop a like and consider subscribing to the channel and I'll see you guys in the next one

Channel: Mayank Srivastava

Views: 1,118

Keywords: nextjs, deployment, vercel, how to deploy app, live, website live, hosting, free hosting, build, pipeline, production, install, package, host web app, host, production issue, networking, database network issue, vercel tutorial

Id: DFIhMK0pygM

Length: 10min 37sec (637 seconds)

Published: Mon Apr 22 2024