Vercel provides you an option to choose the project template from the avaiable range of templates which are fully optimized and ready for instant deployment, which also saves your time by making you skip basic setup which is time consuming and let you get straight into development.

Step 1: Browsing Vercel Templates

visit vercel.com/templates
You'll find a wide range of template options which are categorized by framework:
- Next.js (perfect for SSR/SSG projects)
- Nuxt
- Gatsby
- vite
- Remix
- React, Vue, and more
You can also search or filter templates by category, framework, or features (e.g. with TypeScript, with Tailwind CSS).
choose the template from the avaiable options.

Step 2: Deploying the Template

Once you select the template, you can now easily deploy it to Vercel. Follow these steps:

Click on “Use Template”

Once the template is selected, click the “Use Template” button to start the deployment process. Now it will show you the option to link your project(selected templated) with your GitHub repository.

Choose GitHub as the Source

After clicking "Use Template", Vercel will give you option to select a source for your project. Choose GitHub as the source control system.

Connect Your GitHub Account

If GitHub account is not linked to Vercel yet, link your Github account with Vercel and choose the Github Repository that you want to deploy.

Deploying the Template

Now that the Github account is Linked, project deployment process will start and you can now see the real-time deployment progress.

Step 3: Deployment Options

After deploying your template, you can configure your project’s deployment settings, that may include selecting the different branches for production and development.

Set the Production Branch

Inside project settings of selected project, you can select which branch will be used for the production environment. By default, Vercel uses the main branch for production. However, you can change this if you'd like to use a different branch.

Set the Development Branch

you can configure your development branch for the project same as you did for production branch. Development branch let you test your code changes before pushing code to production branch.

Triggering Deployments

Once these branches are set, every push to the designated production or development branches will trigger a new deployment on Vercel.

Step 4: Domain

Linking your project with a Domain will enchance user's experience with professional feel, branding, and also improves SEO. You can either buy a new domain or use an existing one if you already have to link attach domain with your project.

Following are the steps to buy new domain if you don't have already

In you vercel, visit https://vercel.com/domains
There you will find text box which says "search for domains..." Type the most relateable name that matches your website.
You will get the list for domains that you entered. From that list choose your domain
Enter payment details and confirm your purchase

Now Attach Domain with your Project

Select your Project->Domains->Add Domain

Step: 5 Environment Variables

You can set environment varibale on vercel which you can either set for all projects on vercel (publicly accessible by all projects in vercel) or you can set project specific environment variable (which can only be accessed by the particular project for which it was set).

When creating environment variables, you can choose for which "Environment" (Production, Preview, Development) you want to set that variable for.

For Local Development you can set your environment variable in .env file which you have to create at the root level of your project.

To create environment variable for Next.js Project, which are intended to be used by client-side you need to add prefix as "NEXT_PUBLIC_".

After adding new environment variable you need to redeploy your project so that project can make use of the newly created variable.

Following is an image for project specific setting environment variable for preview environment.

Below is an image for viewing all environment variables and their Enviroment.

To load environment variables from vercel into your project, you can use following command in command prompt of your project root directory

Globally install vercel
```
npm install -g vercel
```
verify it is properly installed using
```
vercel --version
```
Locally link your project with vercel
```
vercel link
```
and follow the further prompts shown on the screen to link your project.
Get environment variables from vercel using either of command below
```
vercel env pull
```
OR
```
vercel env pull .env.local
```

If used vercel env pull this will automatically create .env file with key value pair from vercel environment in your project root directory.

If used vercel env pull .env.local this create .env.local file with key value pair from vercel environment in your project root directory.

You can now use process.env. to access environment variables.

.env file will be automatically be included in .gitignore so that environment variables are not commiting to project repository.

You can also import .env file from your project into your vercel dashboard. When you follow this step, enviroment variables from .env file from project will be automatically used by vercel.

Following image shows where you can perform this step

To Redeploy your project from vercel, follow below reference shown.

Step 6: Successful Deployment

After completing the setup and pushing your code to the chosen branch, Vercel will automatically deploy the application. You can monitor the deployment progress and confirm that everything is running smoothly.

Build Logs and Live URL

Once the deployment process is started, you can see the build logs in real time. These logs provide important information about the build process, so you can troubleshoot if needed. After the build is successful, Vercel will generate a live URL for your deployed project.

Triggering New Builds

After the initial deployment, any new changes pushed to the specified production or development branches will trigger new builds. This allows you to keep your application updated automatically with every change you make to your GitHub repository.

Deployment Status

You can also monitor the status of your deployment from the Vercel dashboard. If the deployment is successful, it will show a green status, and if there’s an issue, you will see a red status with error messages indicating the problem.

Vercel

How to Deploy Your Project on Vercel with GitHub Integration — A Step-by-Step Guide