There are many platforms to host your Next.js app. Out of them, I prefer Vercel. Vercel is the fastest way to host your Next.js application and it directly gets connected to your GitHub. So every time you create a new commit to your project, the build process is triggered and a new version is automatically deployed.
And along with this, there are other numerous features provided by Vercel team such as Monitoring, Build Previews, HTTPS and SSL Certificates, Env Variables and using Custom domains. All these features come free thanks to Vercel. And if you don’t know it already, Next.js is created and maintained by Vercel Team!
So now lets get into the process.
Push your project on GitHub:
Create a repository on GitHub for your project. The process is quite simple, just log in to your GitHub account and click on new repository.
You can keep the repository public or private your choice. Once done, you need to push your project to GitHub. The steps will be given when you create the repository. You just need to commit all changes and push to your branch.
If you find those commands confusing, run the following commands one by one.
git commit -m "Ready for Deployment"
git remote add origin "URL for your git origin"
git push -u origin main
These are the same commands which your repository must be showing.
Connecting Vercel with your GitHub account:
Now head over to Vercel from the below link and create your account using GitHub.
Once you authorize your account you will be redirected to your Dashboard.
The dashboard should be similar to this. I have 4 projects running so you can see them but for you, it must be blank.
Click on New Project
You would see a page showing all your projects available on GitHub. If you can’t see anything, there will be a button to connect Vercel with your GitHub. Click on that button and allow Vercel access to your GitHub.
Choose your project which you wish to deploy. You can put your name for the project here. Make sure you give a good name because this name appears in your deployed URL.
Leave everything else blank. ( If you have a different configuration for Build and Install command you can edit it). For basic App you can leave it blank.
Now if you use any environment variables in your project, Click on Environment Variables setting below.
Here you can set your environment variables which you set using .env file in development mode. Make sure you use the same variable name.
Important!
If you have any environment variable that is used on the browser side , you need to prefix the variable with NEXT_PUBLIC_ . By default env variables are only available in Node.js environment hence to access it on browser we should use this prefix.
Now since we have configured everything you can click on deploy and watch Vercel do its magic!
After a couple of minutes, if you are lucky and there are no errors your site will be deployed successfully! You will be redirected to your Site Dashboard. If you encounter any problems during deploy check the build logs. You can find those logs on deployment tab. Check the logs find the bug, resolve it and push a new commit. Vercel will automatically detect a new commit and start building the site again.
My project got deployed successfully and here it is!
https://next-js-portfolio-weld.vercel.app/
Thank you for reading! If you loved the blog, do like it and share it. I post many such tweets about Web Development and Programming on Twitter, you can follow me if you love such content! Thanks!
Latest comments (0)