How to Deploy a Next.js Website on Vercel from GitHub (Free Steps)

Vercel is made by the team behind Next.js, so a Next.js project deploys with almost no configuration. Every push to GitHub becomes a new deployment.

Before you start

• Your project is on GitHub (see the VS Code + Git + GitHub guide).
• npm run build works on your own computer without errors.
• Secrets are in .env.local, not in the code.

Deploy in 6 steps

1. Go to vercel.com and sign up with your GitHub account.
2. Click Add New > Project and select Import Git Repository.
3. Choose your repository. If it is missing, allow Vercel access to it in the GitHub permissions popup.
4. Vercel detects Next.js automatically. Leave the build settings as they are.
5. Open Environment Variables and add the values from your .env.local (for this site: NEXT_PUBLIC_ADSENSE_CLIENT, NEXT_PUBLIC_EMAIL, NEXT_PUBLIC_WHATSAPP and so on).
6. Click Deploy. After a minute you get a your-project.vercel.app URL.

Production vs preview deployments

Pushes to your main branch update the live production site. Pushes to any other branch or a pull request create a separate preview URL, so you can test changes before they go live.

Connect your custom domain

1. In the project, open Settings > Domains and add atalrawat.in (and www.atalrawat.in).
2. Vercel shows the DNS records to add. Copy exactly what it shows.
3. Log in to the place where you bought the domain (for example Hostinger) and open its DNS zone editor.
4. Add the records Vercel asks for, usually an A record for the root domain and a CNAME record for www.
5. Wait for DNS to update (minutes to a few hours). Vercel issues the HTTPS certificate automatically.

Note: If you bought your domain on Hostinger but host the site on Vercel, you only change DNS records in hPanel. You do not need a Hostinger hosting plan for that.

After deploying: SEO checklist

• Open https://your-domain/sitemap.xml and /robots.txt to confirm they load.
• Add the site in Google Search Console and submit the sitemap.
• Set the canonical domain (with or without www) and redirect the other one.
• Run PageSpeed Insights and fix any red items.

Vercel Hobby plan and commercial sites

Vercel's free Hobby plan is intended for personal, non-commercial projects. A business website, client work or a site that shows ads may need a paid plan, so read Vercel's current terms before you rely on Hobby for production. If you would rather keep costs fixed, Hostinger's Node.js hosting is an alternative (see the Hostinger guide).

Troubleshooting

• Build fails on Vercel but works locally: read the build log, most often a TypeScript error or a missing environment variable.
• Changes not visible: confirm the push reached the main branch and the latest deployment is marked Ready.
• Domain shows an error: recheck that the DNS records match Vercel's Domains page exactly.