How to use build output api on Vercel

Create a .vercel/output directory in your project root. Inside this directory, create three subdirectories: static for static assets, functions for serverless functions, and config.json for routing configuration.

mkdir -p .vercel/output/static
mkdir -p .vercel/output/functions
touch .vercel/output/config.json

Create your config.json file to define routing rules. Specify version as 3, and define routes array with patterns and destinations:

{
  "version": 3,
  "routes": [
    { "src": "/api/(.*)", "dest": "/api/$1" },
    { "src": "/(.*)", "dest": "/static/$1" }
  ]
}

Place your static assets (HTML, CSS, JS, images) in the .vercel/output/static directory. These files will be served directly by Vercel's CDN:

cp -r dist/* .vercel/output/static/
# or
cp index.html .vercel/output/static/
cp -r assets/ .vercel/output/static/

For serverless functions, create subdirectories in .vercel/output/functions. Each function needs an index.js file and a .vc-config.json configuration:

mkdir .vercel/output/functions/api
echo '{ "runtime": "nodejs18.x" }' > .vercel/output/functions/api/.vc-config.json

Create your function in .vercel/output/functions/api/index.js.

In your function's index.js file, export a default function that handles the request and response:

export default function handler(request, response) {
  response.status(200).json({
    message: 'Hello from Build Output API',
    method: request.method
  });
}

Update your vercel.json or package.json build script to generate the .vercel/output structure. Set buildCommand to null if using custom build:

{
  "buildCommand": null,
  "outputDirectory": ".vercel/output"
}

Deploy your project using the Vercel CLI. The CLI will detect the .vercel/output directory and use the Build Output API:

vercel deploy
# or for production
vercel deploy --prod

Monitor the deployment logs in your Vercel Dashboard under the Deployments tab.