How to deploy a pre-built next.js app to Vercel (without Git integration)?

Viewed 1093

I am really looking for a (simple, straightforward) way to deploy a next.js application from an existing, private Gitlab repository and finished build pipeline to Vercel, but without uploading my sources or running builds on their systems; just the previously "built" next.js bundle.

Besides their popular repository integrations, which don't fit here, they also offer a CLI tool and an HTTP API for manual publishing.

The CLI tool, however, seems to push the whole repository to Vercel as well and won't deploy anything unless build-time information like "command to install modules" etc. is provided.

The API is well-documented, but I guess it works the same way, and I couldn't find an example that explains which files I need to select for the upload (which requires a "list" of files).

2 Answers

It looks like a two step process in their docs, one call to POST /v2/now/files uploads the assets and then POST /v12/now/deployments to create the deployment from those assets.

Just run an async function in your build pipeline with a couple await calls to Vercel and you should be set. Super simplified example but if you build the client and handlers, it should look like this more or less I'd think:

// Assumes you put together a Vercel REST client and used the above endpoints
import { vercelClient } from '../lib/clients'
import { postFiles, createDeployment } from '../lib/handlers'

async function deployToVercel(files) {
  let errors 
  await postFiles({ payload: files }).catch(err => { errors = err }
  await createDeployment({ moreSettings: here }).catch(err => { errors = err }
}

You could also create a new project using a temporary repository – it can be some blank repo on GitHub, for example.

After the project exists, you can disconnect the Git repo, change the Framework preset and set up a CI pipeline to publish a pre-built/static HTML site there.

(I also find it strange that it's not possible to create a "blank" project via their web UI.)

Related