Vercel: import in a minute
Lesson 13 of 26 in the course “Vibe coding”. Free, with animations and a quiz.
Vercel and Next.js
Vercel is a hosting that frontend developers especially love. The same company makes Next.js, a popular framework, meaning a ready-made skeleton for JavaScript sites. Many AI builders and agents create Next.js projects by default. Example: you built a portfolio in a builder for your design school application and moved the code to GitHub. Vercel gets a project like that right away.
Import from GitHub in three steps
The path in the figure goes left to right. Import: you sign in with GitHub and pick the portfolio repository. Settings detected: Vercel figures out the framework, the build command and the output folder by itself, and usually you don't need to touch anything. Deploy: you start it and the build runs. At the end you get a link to the site that you can already send to friends. You'll connect your own site name later, in the domains lesson.
A preview for every Pull Request
From here it's like the deploy lesson: a push to main updates the live site. And every Pull Request gets its own preview link, the chip in the figure. Example: an agent reworked the projects page in a branch. You open the preview on your phone and check it. On Vercel you can leave a comment right on top of the preview page: “this image is cropped”. All fixed? You merge.
Environment variables
Environment variables (env vars) are settings and keys that the hosting hands to your code when it runs, instead of keeping them in the repository. On Vercel you set them separately for three environments, the panel in the figure. Production: the live site. Preview: the preview links. Development: running on your own computer. Example: a test payment key in Preview, the real one in Production. Changed a variable? Do a new deploy.
Rollback in one click
Every deploy stays in a list, the row at the bottom of the figure. Example: you merged, and all your projects vanished from the live site. Don't ask the AI to rush a fix straight into main. Click Rollback on the last working deploy, and it becomes the live site again almost instantly, with no new build. Then calmly hunt for the bug in a branch. In short: roll back first, fix second.
Vercel or Cloudflare?
Both work for a first site: connect GitHub, get a build, previews and a live site, like in the figure. Vercel is the default choice for Next.js projects, which builders often generate. Cloudflare is stronger at DNS, protection and Workers. Not sure? Pick the one where your project built without trouble. There's usually a free plan; check the limits on the site. Check whether the service is available in your country. Practice in the Vercel simulator.
Check yourself
- What does Vercel do right after you import a repository?
Correct answer: Detects the framework and build settings itself. Vercel recognizes the framework, the build command and the output folder. A domain is connected separately, whenever you want. - A new version broke the live site. What's the first thing to do?
Correct answer: Roll back to the last working deploy. Rollback brings back the working version almost instantly, with no new build. Fix it calmly later, in a branch. - Why set different env vars for Production and Preview?
Correct answer: So previews don't touch the real keys. Preview can hold test keys while the real ones live only in Production. Then testing in a branch doesn't touch real money or data.