First deploy of a Next.js application#

Goal: an app online in a few minutes#

In this lesson we'll take a Next.js project from repository to a public address. We'll show two routes: through the Vercel dashboard (recommended to start) and through the Vercel CLI.

Option A — import from GitHub (dashboard)#

1. Go to vercel.com and sign in with the GitHub account of the ProfessNet organization.
2. Add New → Project.
3. Select the repository with the Next.js application.
4. Vercel automatically detects the framework (Next.js) and sets up the build.
5. Click Deploy.

Vercel detects the settings itself, but it's worth knowing them:

Setting	Value for Next.js
Framework Preset	Next.js
Build Command	next build
Output Directory	.next (managed automatically)
Install Command	npm install
Node.js Version	20.x (or matching the project)

When the build finishes you get an address like project-name.vercel.app.

Option B — Vercel CLI#

The CLI is handy for quick deploys and automation.

# Global installation
npm i -g vercel

# Login
vercel login

# First deploy from the project directory (interactive prompts)
vercel

# Deploy straight to production
vercel --prod

The first vercel run asks questions (scope, project name, directory) and creates a .vercel/project.json file linking the folder to the project on the platform.

Configuration via vercel.json (optional)#

For non-standard settings, use a file at the repo root:

{
  "framework": "nextjs",
  "regions": ["fra1"],
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        { "key": "X-Frame-Options", "value": "DENY" }
      ]
    }
  ]
}

Tip: The fra1 (Frankfurt) region is a good choice for users from Poland — closer than the default US region, so serverless functions respond faster.

Checking the deploy#

After it finishes:

1. Open the generated URL — the application should be working.
2. In the project dashboard, look at the Deployments tab — you can see status, build time and logs.
3. Every subsequent push to main automatically triggers a new production deploy.

When the build fails#

The most common causes: a missing environment variable, a TypeScript type error (next build aborts on type errors), or an incompatible Node version. The build logs in the dashboard show the exact line. Locally you reproduce it with npm run build — if it passes for you, it'll pass on Vercel too.

Summary#

A first deploy is: connect the repo, confirm the detected Next.js settings, click Deploy. From that moment, every push to main is a new production deploy. The CLI gives the same power from the terminal and opens the door to automation.