Unit 8: Launching Your Website with Vercel

In Unit 8 of the Avarix AI Website Program, you’ll learn how to publish your Next.js project on Vercel— giving your website a live URL so anyone can visit it. You’ll explore Vercel’s features, deployment steps, and how to keep your site running smoothly.

Lesson 8.1: What is Vercel?

Understand what Vercel does and why it’s a great fit for Next.js apps.

Overview of Vercel

Vercel is a platform that hosts static sites and serverless functions. It’s fast, automatic, and designed to work seamlessly with tools like Next.js. It handles all the heavy lifting so you can focus on building.

Benefits of Using Vercel

Built by the creators of Next.js for top compatibility
Push to GitHub, and it auto-deploys—no extra steps
CI/CD (build + deploy) included out of the box
Free to use for personal sites and projects
Global CDN delivers content super fast to users worldwide

Setting Up Vercel

Head to vercel.com and sign up for a free account
Link your GitHub account
Install the Vercel CLI by running this in your terminal:

npm i -g vercel

Check that it worked with:

vercel --version

Lesson 8.2: Deploying Your Project

Follow these steps to take your site live on Vercel.

Checklist Before Deployment

Make sure your app is ready for the web:

All changes are pushed to GitHub
Your project includes a package.json file
Environment variables are added and correct
Your site builds locally with no issues

How to Deploy

Push your project to GitHub (if not already done)
Go to your Vercel dashboard and click “New Project”
Select your GitHub repo to import
Set the project settings:
- Framework Preset: Next.js
- Build Command: next build
- Output Directory: .next
Add your .env keys if needed
Hit "Deploy" and wait a minute for your site to go live

Lesson 8.3: Handling Your Live Site

Monitor, update, and customize your deployment after launch.

Watching Over Your Deployment

Here’s what you can track in Vercel:

Live status of your deploys
Performance reports and loading speeds
Error logs and stack traces
Visitor stats and user behavior

Using Your Own Domain

Want a custom URL? Here’s how:

Go to the “Domains” tab in your project settings
Add your custom domain (like mysite.com)
Follow Vercel’s instructions to update your DNS
Wait a little while (DNS setup may take up to 48 hours)

Keeping It Up to Date

Every time you push a new commit to GitHub, Vercel redeploys your app automatically. You also get a preview link to test updates before they go live.

Homework: Launch Your Final Site

Publish your final AI website on Vercel and submit your link.

What You Need to Do

Make a free Vercel account and connect it to GitHub
Deploy your finished AI site from Unit 7
Be sure to include any needed environment variables
If you want, add a custom domain name
Turn in your live site’s URL via Schoology

Was this page helpful?