Have you implemented your Next.js Web Application? The deploying phase is one of the many processes that occur during the web-building process. Deploying a web application can be a complicated process. However, using Vercel to deploy it can make it easier because it will connect with our repository and automatically create the hook. Vercel supports the three most popular code version controls, GitHub, GitLab, and Bitbucket.
What is Vercel?
Vercel is a platform for front-end frameworks and static sites. It’s a platform to help developers deploy and serve their front-end apps. They provide a platform where the developer can simplify CD processes, such as: deploying, scaling automatically, and operating our app around the globe.
They make it easy for Front-end teams to develop, preview and ship delightful user experiences where performance is the default.
Here’s a simple diagram to show how Vercel’s deployment works.
Why use Vercel?
Vercel provides an easy-to-use platform for developers to simplify CD processes that usually takes time. Still, with Vercel, developers only need to spend less time creating the CD process.
For example, when deploying applications using Jenkins as a CI/CD tool, we would need to make a few prerequisites, like creating a Jenkins instance and creating Jenkinsfile for the pipeline setup.
Still, if your build does not work as planned, the related mistake is found inside the building accordion as described. There are options to access these logs:
If the failed build is the most up-to-date deployment, you will see an error in the upcoming section below the deployment preview on the project’s overview pages. Click on the link next to the error to be directed to the specific deployment page.
So, using Vercel, developers can spend more time on the app development phase than the CD process.
How to Deploy Next.js with Vercel?
The deployment process is relatively straightforward, and we will allow Vercel to have permission over our application that’s going to be deployed.
You can use any Next.js project for this tutorial. For the sake of this tutorial, I will only use a simple Next.js project with Next.js version 12.2.0.
Follow these steps:
- Make sure to put your code into the repository, and we will use GitHub in this tutorial.
- GitHub produces quality code more quickly. It’s a development platform with end-to-end security, up-to-date automation, and tools to increase team productivity.
- Create an account in Vercel.
- After creating an account, open your profile’s dashboard page in Vercel. It will show your projects (if any). On this page, click on Create a New Project.
- On this page, we need to import your Git Repository first. Just follow the simple steps that they provide. After it’s connected to our repository, choose the project we want to deploy. We will need to sign in to our repository and allow the required access to enable Vercel to read our project in our repository.
- After successfully importing our project from our repository, you will be redirected to this page. Here, we can click on the Deploy button to deploy our application. For now, leave the rest to default. We can check our deployment process at the bottom of the page later. If any errors are found, we can see the cause. The error message that Vercel provides is easy to understand.
- Your code should be successfully deployed after a few minutes and will be redirected to this page. To see/access our deployed application, click Go to Dashboard to find the deployment link.
If the deployment fails, you can check the error on the build output from the previous image.
Conclusion
Using Vercel to deploy our Web Application can make the development phase faster because we don’t have to spend too much time setting up the deployment environment.
This article has covered the basic features of deploying the Next.js app using Vercel. There are many uses for Vercel. To find out more, check out their official page here https://vercel.com/docs.
Reference
Author: Jordi Riadi, Software Engineer (Analyst Programmer)
