How to Deploy a Next.js Portfolio to Vercel for Free (Step by Step)

You built a portfolio in Next.js. It runs fine on localhost:3000. Now you need it on the internet with a real URL you can put on a résumé — ideally without paying a monthly bill for something that gets ten visitors a week.

The good news: Vercel hosts a personal Next.js site for free, and the deploy is genuinely a few minutes of work. The less-good news is that "free" has edges, and most tutorials skip them so you find out the hard way. Here's the honest walkthrough — the steps, then the limits that actually matter for a portfolio.

Why Vercel for a Next.js portfolio

Vercel is the company behind Next.js, so the framework's features — App Router, server components, image optimization, incremental static regeneration — work without configuration. You don't wire up a build pipeline or guess at settings. Push to git, and Vercel detects Next.js and does the right thing.

For a portfolio specifically, the Hobby (free) plan is a strong fit because portfolios are low-traffic, mostly-static sites. You're nowhere near the limits most of the time. Other hosts work too — Netlify, Cloudflare Pages, a VPS — but none make Next.js this frictionless, and the free tier is generous enough that you rarely think about it.

Step 1: Get your code into a git repository

Vercel deploys from git. If your project isn't in a repo yet, create one on GitHub (GitLab and Bitbucket also work), then from your project folder:

git init
git add .
git commit -m "Initial portfolio"
git remote add origin https://github.com/yourname/portfolio.git
git push -u origin main

Before you push, double-check that .gitignore excludes node_modules, .next, and any .env file with secrets. The default Next.js .gitignore handles this, but it's worth a glance — committing an .env with API keys is the classic first mistake.

Step 2: Import the project into Vercel

Sign up at vercel.com with your GitHub account. On the dashboard, click Add New → Project, then select your portfolio repo from the list. Vercel reads the project, sees it's Next.js, and pre-fills the build settings:

• Framework Preset: Next.js
• Build Command: next build
• Output Directory: .next
• Install Command: npm install (or your package manager)

You almost never need to change these. If your site uses environment variables — an API key, a form endpoint, an analytics ID — add them now under Environment Variables, using the same names your code expects (process.env.NEXT_PUBLIC_...). Variables prefixed NEXT_PUBLIC_ are exposed to the browser; everything else stays server-side.

Click Deploy. Vercel builds the site and, a minute or two later, gives you a live URL like your-portfolio.vercel.app.

Step 3: Continuous deployment is already on

Here's the part that makes Vercel genuinely pleasant: you're done setting up deploys. From now on, every push to your main branch triggers an automatic build and goes live. Push to any other branch and Vercel gives you a preview deployment — a separate URL with that branch's changes — so you can review a redesign before it hits production.

This means your workflow for updating the portfolio is just: edit, commit, push. No FTP, no manual "deploy" button, no server to SSH into.

Step 4: Add your custom domain

A .vercel.app URL is fine for testing, but for anything you're sharing professionally you want your own domain. Buy one (~€10–15/year from any registrar — this is the one cost that isn't free, and it's worth it).

In your Vercel project, go to Settings → Domains, enter your domain, and Vercel tells you which DNS records to set. You have two options:

• Point your registrar's DNS at Vercel by adding the A record or CNAME they specify. Keep your domain at your current registrar; just update the records.
• Move nameservers to Vercel for hands-off management.

Either way, Vercel provisions an HTTPS certificate automatically — no manual SSL setup. DNS changes can take anywhere from a few minutes to a few hours to propagate. Once they do, your portfolio is live on yourname.com with a padlock.

The limits that actually matter

This is the part tutorials skip. The free Hobby plan has real constraints, but for a portfolio almost none of them bite. The two worth knowing:

It's for non-commercial use. Vercel's Hobby plan is intended for personal projects. A portfolio that showcases your work and links to your contact info is squarely fine. If you start running a business off it — selling products, serving clients' production apps — that's when their terms expect you to move to the Pro plan. A personal site is exactly the use case Hobby is built for.

Bandwidth and build minutes are capped, generously. The free tier includes a monthly bandwidth allowance and a cap on build execution. A static portfolio with optimized images uses a tiny fraction of this. You'd need a surprise traffic spike — a viral Hacker News post, say — to approach the limit, and even then Vercel throttles rather than charging you by surprise. Optimize your images (use next/image), and you'll likely never see the ceiling.

What this means in practice: for a personal developer or designer portfolio, "free forever" is an accurate description, not a bait-and-switch.

A note on owning what you deploy

One thing worth being deliberate about: deploy code you actually control. When the portfolio lives in your own git repo and deploys to your own Vercel account, you own every layer. You can move hosts, edit any line, or export the whole thing whenever you want. That's a different position than renting a site from a builder where your content lives in someone else's database.

This is the model a self-hosted template gives you — and it's the approach Nexfolio is built around: you get the full Next.js source, deploy it to your own Vercel account with a guided setup, and the site is yours. But the principle holds whatever code you use: deploying your own repo to your own account is the cheapest, most durable way to put a portfolio online.

Wrapping up

Deploying a Next.js portfolio to Vercel comes down to four moves: get the code in git, import the repo, let continuous deployment handle updates, and point a custom domain at it. The free tier covers a personal portfolio comfortably, the HTTPS is automatic, and the only real cost is the domain name. Push your code, share the link, and spend your energy on the work the portfolio is meant to show.