A Vercel build runtime for static websites and single-page applications with zero configuration.
—
Quality
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Support for different Build Output API versions (v1, v2, v3) with automatic detection and processing of static files, serverless functions, middleware, and deployment configuration.
Each Build Output API version uses specific directory names and configuration files:
// Build Output V1 Constants
const VERCEL_BUILD_OUTPUT = '.vercel_build_output';
// Build Output V2 Constants
const BUILD_OUTPUT_DIR = '.output';
const CONFIG_FILES = [
'build-manifest.json',
'functions-manifest.json',
'images-manifest.json',
'prerender-manifest.json',
'routes-manifest.json'
];
// Build Output V3 Constants
const BUILD_OUTPUT_DIR = '.vercel/output';
const CONFIG_FILE = 'config.json';The latest Build Output API that provides the most comprehensive deployment configuration through .vercel/output directory structure.
/**
* Detects Build Output API v3 directory by config.json presence
* @param path - Working directory path
* @returns Path to build output directory or undefined
*/
function getBuildOutputDirectory(path: string): Promise<string | undefined>;
/**
* Reads v3 configuration file
* @param path - Working directory path
* @returns Configuration object with cache settings
*/
function readConfig(path: string): Promise<any | undefined>;
/**
* Creates v3 build output result, throws error in dev mode
* @param meta - Build metadata
* @param buildCommand - Build command used
* @param buildOutputPath - Path to build output directory
* @param framework - Detected framework
* @returns Build result with v3 format
*/
function createBuildOutput(
meta: Meta,
buildCommand: string | null,
buildOutputPath: string,
framework?: Framework
): Promise<{\n buildOutputVersion: 3;\n buildOutputPath: string;\n}>;Usage Examples:
import * as BuildOutputV3 from "@vercel/static-build/utils/build-output-v3";
import { join } from 'path';
import { promises as fs } from 'fs';
import { BuildResultV2, Meta } from '@vercel/build-utils';
import { Framework } from '@vercel/frameworks';
// Detect v3 build output
const outputDir = await BuildOutputV3.getBuildOutputDirectory("/project");
if (outputDir) {
console.log("Found Build Output v3 at:", outputDir);
// Read configuration
const config = await BuildOutputV3.readConfig("/project");
console.log("Cache patterns:", config?.cache);
// Create build result
const result = BuildOutputV3.createBuildOutput(
{ isDev: false },
"npm run build",
outputDir
);
}V3 Directory Structure:
.vercel/output/
├── config.json # Global configuration
├── static/ # Static files
├── functions/ # Serverless functions
└── ...Intermediate Build Output API using .output directory with manifest-based configuration.
/**
* Detects Build Output API v2 directory by manifest files
* @param workingDir - Working directory path
* @returns Path to build output directory or undefined
*/
function getBuildOutputDirectory(workPath: string): Promise<string | undefined>;
/**
* Reads the BUILD_OUTPUT_DIR directory for middleware and static files
* @param workPath - Working directory path
* @returns Object with staticFiles, functions, and routes
*/
function readBuildOutputDirectory(options: { workPath: string }): Promise<{
staticFiles: Files | null;
functions: Record<string, EdgeFunction> | null;
routes: Route[] | null;
}>;
/**
* Creates v2 build output result from .output directory
* @param workPath - Working directory path
* @returns Build result with processed files and routes
*/
function createBuildOutput(workPath: string): Promise<BuildResultV2>;Usage Examples:
import * as BuildOutputV2 from "@vercel/static-build/utils/build-output-v2";
import { pathExists, readJson, appendFile } from 'fs-extra';
import { Route } from '@vercel/routing-utils';
import { Files, FileFsRef, EdgeFunction, BuildResultV2 } from '@vercel/build-utils';
// Detect and process v2 build output
const outputDir = await BuildOutputV2.getBuildOutputDirectory("/project");
if (outputDir) {
const result = await BuildOutputV2.createBuildOutput("/project");
console.log("Static files:", Object.keys(result.output));
console.log("Routes:", result.routes);
}V2 Directory Structure:
.output/
├── build-manifest.json # Build configuration
├── functions-manifest.json # Function definitions
├── images-manifest.json # Image optimization
├── prerender-manifest.json # Pre-rendered routes
├── routes-manifest.json # Route configuration
├── static/ # Static assets
└── server/ # Server functionsV2 Configuration Files:
build-manifest.json: Build metadata and settingsfunctions-manifest.json: Serverless function definitionsimages-manifest.json: Image optimization configurationprerender-manifest.json: Pre-rendered page definitionsroutes-manifest.json: Dynamic route configurationLegacy Build Output API using .vercel_build_output directory structure.
/**
* Reads .vercel_build_output directory and returns processed outputs
* @param options - Configuration with workPath and nodeVersion
* @returns Build outputs with static files, functions, routes, images, and build config
*/
function readBuildOutputDirectory(options: {
workPath: string;
nodeVersion: NodeVersion;
}): Promise<BuildOutputV1Result>;
/**
* Generic config file reader for build output
* @param options - Configuration with workPath and config filename
* @returns Parsed configuration object
*/
function readBuildOutputConfig<Config>(options: {
workPath: string;
configFileName: string;
}): Promise<Config | undefined>;
interface BuildOutputV1Result {
staticFiles: Files | null;
functions: Record<string, Lambda> | null;
routes: Route[] | null;
images: ImagesConfig | null;
build: BuildConfig | null;
}Usage Examples:
import * as BuildOutputV1 from "@vercel/static-build/utils/build-output-v1";
import { Files, Lambda, NodeVersion } from '@vercel/build-utils';
import { Route } from '@vercel/routing-utils';
import { BuildConfig, ImagesConfig } from './_shared';
// Process v1 build output
const result = await BuildOutputV1.readBuildOutputDirectory({
workPath: "/project",
nodeVersion: { major: 18, range: "18.x", runtime: "nodejs18.x" }
});
if (result.staticFiles) {
console.log("Static files found");
}
if (result.functions) {
console.log("Serverless functions:", Object.keys(result.functions));
}
// Read specific configuration
const routes = await BuildOutputV1.readBuildOutputConfig<Route[]>({
workPath: "/project",
configFileName: "routes.json"
});V1 Directory Structure:
.vercel_build_output/
├── config/
│ ├── build.json # Build configuration
│ ├── routes.json # Route definitions
│ └── images.json # Image settings
├── static/ # Static files
└── functions/ # Serverless functions
└── node/ # Node.js functions (legacy)The build function automatically detects and processes build output in priority order:
.vercel/output/config.json.output/ with manifest files.vercel_build_output/ directorydist or configured output directory// Detection flow in build function
const buildOutputPathV3 = await BuildOutputV3.getBuildOutputDirectory(outputDirPrefix);
if (buildOutputPathV3) {
return BuildOutputV3.createBuildOutput(meta, buildCommand, buildOutputPathV3, framework);
}
const buildOutputPathV2 = await BuildOutputV2.getBuildOutputDirectory(outputDirPrefix);
if (buildOutputPathV2) {
return await BuildOutputV2.createBuildOutput(workPath);
}
const extraOutputs = await BuildOutputV1.readBuildOutputDirectory({
workPath,
nodeVersion,
});All Build Output APIs support serverless functions with different configuration approaches:
V3 Functions: Configured in individual function directories
V2 Functions: Defined in functions-manifest.json
V1 Functions: Configured in config/functions.json
interface FunctionConfig {
memory?: number;
maxDuration?: number;
runtime?: string;
handler?: string;
regions?: string[];
}Build Output APIs v2 and v3 support Edge middleware:
interface EdgeFunction {
deploymentTarget: 'v8-worker';
entrypoint: string;
files: Files;
name: string;
}Middleware Route Configuration:
const middlewareRoute = {
src: '/(.*)',
middlewarePath: 'middleware',
continue: true
};All Build Output APIs support image optimization settings:
interface ImagesConfig {
domains: string[];
sizes: number[];
}Example image configuration:
{
"domains": ["example.com", "cdn.example.com"],
"sizes": [640, 750, 828, 1080, 1200, 1920, 2048, 3840]
}Install with Tessl CLI
npx tessl i tessl/npm-vercel--static-build