DevOps

Deploying a Web App on Vercel - Easy Hosting Tutorial

Introduction

Vercel is a platform designed to simplify web application hosting, particularly for frontend frameworks like React, Next.js and static sites, with built-in support for serverless functions. Popular among developers for its seamless Git integration and automatic scaling, Vercel offers a free tier that’s ideal for personal projects or small-scale apps. This document guides you through hosting a web application - specifically a Next.js app - on Vercel from India, covering setup, deployment and management as of February 20, 2025. It’s perfect for developers seeking a low maintenance, high performance hosting solution.

Prerequisites

To follow this guide, ensure you have:

A Vercel account (sign up at vercel.com with GitHub, GitLab or email).
Node.js installed (v16+ recommended, nodejs.org).
A web application (e.g., Next.js, React or static HTML).
Git installed (git-scm.com).
Basic CLI and Git knowledge.

Step-by-Step Hosting with Vercel

Vercel’s hosting leverages Git repositories for deployment, making it developer-friendly and streamlined.

Step 1: Set Up Your Web Application

Create a Next.js App:

Install and initialize:

npx create-next-app@latest my-vercel-appcd my-vercel-app

This sets up a basic Next.js project with a default homepage.

Test Locally:

npm run dev

Visit http://localhost:3000 to confirm it works.

Step 2: Initialize Git Repository

Set Up Git In your app directory:

git initgit add .git commit -m "Initial commit"

Push to Remote (optional for now):

Create a repo on GitHub/GitLab/Bitbucket and push if you prefer manual import later.

Step 3: Deploy to Vercel

Install Vercel CLI:

npm install -g vercel

Log In:

vercel login

Authenticate via browser or email token.

Deploy:

vercel

Answer prompts:

Scope: Personal account (default).
Link to Git? Skip for now (select “No”).
Directory: Press Enter (uses current dir). Vercel auto-detects Next.js, builds, and deploys. You’ll get a URL (e.g., https://my-vercel-app.vercel.app).

Step 4: Automate with Git (Optional)

Connect Git Repo:

Push to GitHub:

git remote add origin <github-repo-url>git branch -M maingit push -u origin main

Import in Vercel:

In Vercel Dashboard > New Project > Import Git Repository.
Select your repo, configure (default settings work for Next.js), and deploy.
Future pushes to main auto-deploy.

Step 5: Manage Your App

Custom Domain: Dashboard > Domains > Add (e.g., myapp.com).
Environment Variables: Add via Dashboard > Settings > Environment Variables (e.g., API_KEY=xyz).
Logs: vercel logs <deployment-url> or check Dashboard > Logs.

Additional Features

Serverless Functions: Add an api folder (e.g., pages/api/hello.js) for backend logic:

export default function handler(req, res) { res.status(200).json({ message: "Hello from Vercel!" });}

Scaling: Automatic, no config needed on free tier (limits apply).

Security and Optimization

HTTPS: Free SSL included for all domains.
CDN: Global edge network auto enabled.
Firewall: Use Vercel’s DDoS protection in Dashboard > Security

Troubleshooting

Build Fails: Check logs (vercel logs) for missing dependencies or Node.js version mismatches.
404: Ensure file structure matches Next.js conventions.
Quota Limits: Free tier has 100 GB-hours/month; upgrade to Hobby ($20/month) if exceeded.

Cost Considerations

Free Tier: Unlimited deployments, 100 GB-hours/month, 10 functions.
Paid: Hobby tier ($20/month) adds custom domains, higher limits. See Vercel Pricing.

Conclusion

Vercel simplifies web application hosting with its Git driven workflow, serverless capabilities and free tier, making it an excellent choice for developers in India. Deploying a Next.js app takes minutes, with automatic scaling and global CDN ensuring performance. Whether for prototypes or production, Vercel’s ease and power shine. Start with the CLI or Git integration and scale as your app grows - your web presence is just a vercel command away.

Ready to transform your business with our technology solutions? Contact Us today to Leverage Our DevOps Expertise.