Deploy to Vercel

Vercel is a natural fit for ACMS-powered applications, especially those built with Next.js. This guide covers deploying your application and connecting it to a production storage adapter.

Prerequisites

• A Vercel account
• Your application working locally with acms dev
• A production storage adapter configured in acms.config.ts

Build-Time Strategy

For static or ISR sites, use the build-time strategy. Content is fetched during vercel build and baked into the output.

1. Configure the Production Adapter

acms.config.ts

import { defineConfig } from '@useacms/client';
import { localFile, githubGist } from '@useacms/cli/adapters';

export default defineConfig({
  dev: localFile({ path: './acms.json' }),
  production: githubGist({
    token: process.env.GITHUB_TOKEN,
    gistId: process.env.GITHUB_GIST_ID,
  }),
  strategy: 'build-time',
});

2. Push Content to Production

Before deploying, push your local content to the production adapter:

acms push

3. Set Environment Variables

In the Vercel dashboard, add your adapter credentials as environment variables:

• GITHUB_TOKEN — Your GitHub personal access token
• GITHUB_GIST_ID — Your Gist ID

4. Deploy

vercel deploy

Or connect your Git repository for automatic deployments.

Runtime Strategy with Edge Config

For dynamic content that updates without rebuilds, use the runtime strategy with Vercel Edge Config:

acms.config.ts

import { defineConfig } from '@useacms/client';
import { localFile, vercelEdgeConfig } from '@useacms/cli/adapters';

export default defineConfig({
  dev: localFile({ path: './acms.json' }),
  production: vercelEdgeConfig({
    token: process.env.VERCEL_TOKEN,
    edgeConfigId: process.env.EDGE_CONFIG_ID,
  }),
  strategy: 'runtime',
});

With this setup, content changes are available immediately after acms push without redeploying.

Content Update Workflow

Build-Time

1. Edit content locally or via the dashboard.
2. Run acms push to upload to the production adapter.
3. Trigger a Vercel rebuild (manually or via webhook).
4. New content is live.

Runtime

1. Edit content locally or via the dashboard.
2. Run acms push to upload to Edge Config.
3. Content is live immediately (no rebuild needed).

Vercel Build Configuration

If your project uses ACMS with Next.js, no special build configuration is needed. The standard next build works:

{
  "buildCommand": "next build",
  "outputDirectory": ".next"
}

For other frameworks:

{
  "buildCommand": "astro build",
  "outputDirectory": "dist"
}

Next Steps

• Learn about Vercel Edge Config adapter details
• Explore the Hosted SaaS platform for managed content