Make your deployment more productive with Vercel

1. What is Vercel

Vercel is an end-to-end platform for developers, that allows you to create and deploy your web application. Vercel's architecture is built around Jamstack, and deployments are handled through Git repositories. Vercel was founded by Guillermo Rauch in 2015 as Zeit. Rauch had previously created the real-time event-driven communication library Socket.IO. Zeit was rebranded to Vercel in April 2020, although retained the company's triangular logo.

2. Supported Frameworks on Vercel

Vercel has first-class support for a wide range of the most popular frontend frameworks. You can build your web applications with anything from Astro to SvelteKit, and in many cases deploy them without having to do any upfront configuration.

Deploying on Vercel with one of the supported frameworks gives you access to many of the features, such as:

Preview deployments with comments
Git provider integrations
Serverless Functions
Edge Functions
Edge Configs
In-depth Analytics

The frameworks listed below can be deployed to Vercel with minimal configuration.

Angular, Astro, Brunch, React, Docusaurus 2, Dojo, Eleventy, Ember.js, Gatsby.js, Gridsome, Hexo, Hugo (v0.58.2), Hydrogen, Ionic Angular, Ionic React, Jekyll, Middleman, Next.js, Nuxt.js, Parcel, Polymer, Preact, RedwoodJS, Remix, Saber, Sanity, Sapper, Scully, SolidStart, Stencil, Storybook, SvelteKit, UmiJS, Vite, VitePress, Vue.js, VuePress, Zola (v0.13.0)

3. Overall Architechture

4. Deploying to Vercel

When you create a deployment, Vercel automatically adds a new and unique Generated URL. You can visit this URL to preview your changes in a live environment.

You can deploy your projects to Vercel in four different ways:

Git

The most common way to create a Deployment on Vercel is through pushing code to Git repositories.

Creating an automatic Deployment begins by importing a Git repository on Vercel. This repository can either be private or public. To setup a Git repository, click the New Project button from the Vercel dashboard and select one of the following Git providers:

GitHub
GitLab
Bitbucket

Vercel CLI

Vercel CLI allows you to deploy your Projects directly from the Command Line Interface (CLI). You can use this deployment method whether your project is connected to a Git repository or not.

For a new Project, the first deploy will ask to link your local directory to the Vercel Project. This is done by running the vercel command in your local project directory.

Deploy Hooks

Deploy Hooks are another way of creating deployments on Vercel. However, a connection to a Git repository is still necessary in order to use Deploy, Hooks.

The Deploy Hooks method is useful when the changes in an application depend on external events. If these changes are related to content and are made directly in a Headless Content Management System (CMS) or database, you may want to trigger deployments without touching code. For example, you may want to trigger a deployment when a new blog post is published or when an existing blog post is updated.

To use this deployment method, you have to generate a URL that accepts HTTP GET or POST requests to trigger deployments and re-run the Build Step without needing to push a new git commit. The URL generated is unique for every project.

Vercel REST API

The Vercel REST API is used to create Deployments by making an HTTP POST request to the relevant endpoint. The request's body will include all the files you want to deploy. You will have to generate a SHA for each file and upload using the Vercel REST API.

This deployment method is helpful for projects that use a custom workflow and add custom domains to a multi-tenant application or integrate a third-party service that is not currently supported by the Vercel platform.

5. Serverless Functions Overview

Serverless Functions enable developers to write functions in JavaScript and other languages to handle user authentication, form submissions, database queries, custom Slack commands, and more.

These Functions are co-located with your code and part of your Git workflow. As traffic increases, they automatically scale up and down to meet your needs, helping you to avoid paying for always-on computing with no downtime.

6. Security & Compliance

Vercel takes to ensure the security of user data, including DDoS mitigation, SOC2 Type 2 compliance, Data encryption, and more. Also, Vercel conducts regular penetration testing through third-party penetration testers and has daily code reviews and static analysis checks.

Deployment Protection

The Deployment Protection feature makes your preview URLs private and allows access in a flexible and secure way. Deployment Protection is a per-project feature that is enabled from your project settings. All members on Hobby, Pro, and Enterprise accounts can regulate access to a preview build using the Vercel dashboard. Any user with access to the team will be able to view protected deployments.

7. Vercel CLI Overview

Vercel gives you multiple ways to interact with and configure your Vercel Projects. With the command-line interface (CLI) you can interact with the Vercel platform using a terminal, or through an automated system, enabling you to retrieve logs, manage certificates, replicate your deployment environment locally, manage Domain Name System (DNS) records, and more.

Installing Vercel CLI

To download and install Vercel CLI, run the following command:

Updating Vercel CLI

When there is a new release of Vercel CLI, running any command will show you a message letting you know that an update is available.

If you have installed our command-line interface via npm or Yarn, the easiest way to update it is by running the installation command yet again.

Checking the version

The --version option can be used to verify the version of Vercel CLI currently being used.

Using in a CI/CD environment

Vercel CLI requires you to log in and authenticate before accessing user-specific content or performing administrative tasks. In a terminal environment, you can use vercel login, which requires manual input. In a CI/CD environment where manual input is not possible, you can create a token on your tokens page and then use the --token option to authenticate.

Available Commands

alias, bisect, build, certs, deploy, dev, dns, domains, env, git, init, inspect, link, list, login, logout, logs, project, promote, pull, redeploy, remove, rollback, secrets, switch, teams, whoami

8. Vercel Integration

Vercel provides Extend and automates your workflow by using integrations for your favorite tools in case of Featured, Analytics, CMS,(Content management system Software), Code Repository, Commerce, Databases, DevTools, Logging, Messaging, Monitoring, Observability, Productivity, Security and testing.

9. Getting started

Step 1 – Deploy

A Project groups deployments and custom domains. When you visit the dashboard, you'll see a list of all your Projects. There are two ways to create a new Project on Vercel:
- Import your existing project
  
  This can be any web project that outputs static HTML content (such as a website that contains HTML, CSS, and JavaScript), but it will work best when using one of our supported frameworks
- Use a template
  
  This walkthrough follows the steps to import a project. If you would prefer to use a template, select your favorite template, and click Deploy.

Step 2 – Configuration

Whenever you create a new Project on Vercel, the platform will try to preselect the right default configuration for you.

For example, this happens through detecting which frontend framework you're using, and then selecting the right Build & Development Settings for your Project automatically, or applying default routing rules based on the framework that was detected.

These defaults will let you deploy your Project to Vercel with zero configuration. You can also customize the defaults as needed during the process of creating your Project.
Step 3 – Assign a Domain

When visitors are arriving to your application, they are ideally greeted by a customized experience that evolves around your own brand, to make them quickly realize that they've arrived at the right place.

To guarantee this, you can assign a custom Domain to your Project, which people will then be able to use for accessing your Production Deployment.

On Vercel, this Domain can have any format of your choosing:
- acme.com (apex domain)
- blog.acme.com (subdomain)
- *.acme.com (wildcard domain)

If you already own a Domain, you will be able to point it to Vercel or transfer it over. If you don't own one yet, the platform will also help you purchase a new one.

Step 4 – Make Changes

After you've made your Project publicly available in your Domain of choice, it is time to begin making changes and evolving it further. Using Vercel's automatic Deployments, won't require any extra effort.

By default, if your Project is connected to a Git repository, Vercel will deploy every commit that is pushed to the Git repository, regardless of which branch you're pushing it to.

If you've created your Project from an existing Git repository or a Template, this connection was established for you automatically, so all you have to do is push commits, and you will start receiving links to Deployments right on your Git provider.
Step 5 – Collaborate

When creating a Project, Vercel will automatically detect if you're importing from an existing Git organization, and offer to create a Team.

Otherwise, you can create a new Team from the dashboard, using the scope selector on the top left:
Step 6 – Add Compute

“Compute” is an encompassing term used to describe the actions taken by a computer. When we talk about it with regards to web development and at Vercel, we use compute to describe actions such as (but not limited to) building and rendering - essential operations needed to turn your code into a site that appears for users.
Step 7 – Monitor

Once you've successfully set up your Project on your desired Domain, you can start keeping an eye on its performance and behavior, to make sure that your visitors are provided with the best experience possible.

Even without your involvement, Vercel will guarantee that your Project and Deployments can handle any amount of traffic well and will also help mitigate L3 and L4 DDoS attacks.

10. Why next js in vercel

Next.js is an open-source web development framework created by the private company Vercel providing React-based web applications with server-side rendering and static website generation. Vercel's platform is made by the creators of Next.js, designed for Next.js applications and allows you to defer building pages at request time and also no more inefficient builds (or teams).

Next.js, is one of the most popular web frameworks on the planet right now for React. Next.js is open source and free, and probably a strictly commercial Vercel product.

As React has gotten a lot more popular, Next.js popped up as a React-specific web framework (others are Create React App, Gatsby, etc.).

Because Vercel is the owner/maintainer of Next.js, they’re able to natively integrate it into their commercial frontend-as-a-service product in a few interesting ways. Along with some nifty performance optimizations, every function in the “api” folder automatically gets deployed as a serverless function in Vercel, which is at least one way to build an easy backend.