Deploying to Vercel

Manic integrates with Vercel using the official @manicjs/providers package. This provider transforms your built application into the Vercel Build Output API format.

Setup

First, ensure you have the provider installed:

bun add @manicjs/providers

Then, configure it in manic.config.ts:

import { defineConfig } from 'manicjs/config';
import { vercel } from '@manicjs/providers';

export default defineConfig({
  providers: [vercel({
    regions: ['sfo1'],
  })],
});

Deployment

Simply run the Vercel CLI from your project root:

vercel

For production:

vercel --prod

How It Works

Build Output Architecture

The Vercel provider transforms Manic's unified .manic/ output into the Vercel Build Output API (v3) layout.

Manic build output (input to the provider):

index.html

server.js

Provider output (under .vercel/output/):

config.json

.vc-config.json

client/ → .vercel/output/static/ (global CDN)
server.js and api/ bundles → .vercel/output/functions/ (Serverless by default, or Edge when edge: true on the provider)
Mounted /api/* routes stay on /api/* in production

Regions & Functions

export default defineConfig({
  providers: [vercel({
    regions: ['sfo1', 'iad1'],      // US West, US East
    edge: false,                      // Use Serverless (default)
    // edge: true,                    // Use Edge Functions (faster, limited runtime)
  })],
});

Environment Variables

Set environment variables in Vercel's dashboard or via the CLI:

vercel env add SECRET_KEY

Access them in API routes:

export async function GET() {
  const secret = process.env.SECRET_KEY;
  return Response.json({ secret });
}

Incremental Static Regeneration (ISR)

Manic doesn't use ISR; however, you can implement server-side caching for static-like content:

// app/api/posts/index.ts
import { runtime } from '@vercel/functions';

export async function GET() {
  const cached = await runtime.cache.get('posts');
  if (cached) return cached;

  const posts = await fetchPosts();
  await runtime.cache.set('posts', Response.json(posts), {
    tags: ['posts'],
    revalidate: 3600, // 1 hour
  });

  return Response.json(posts);
}

Revalidate Routes

Invalidate cached routes with Vercel's Revalidate API:

curl -X POST https://api.vercel.com/v1/deployments/<deployment-id>/revalidate \
  -H "Authorization: Bearer $VERCEL_TOKEN" \
  -d '{"paths": ["/posts"]}'

Debugging Deployments

View Logs

vercel logs

Inspect Function Output

vercel inspect

Test Locally

vercel dev

This emulates the Vercel environment locally, including serverless function behavior.

Vercel

On this page