Next.js

Overview

Workflow Studio provides first-class support for Next.js applications with a config wrapper and server-side proxy helpers.

Configuration

next.config.mjs

import { withWorkflowStudioNext } from 'workflow-studio/next';

const nextConfig = {};

export default await withWorkflowStudioNext(nextConfig, {
  execution: { mode: 'remote' },
  mode: 'proxy-trigger',
});

Security Note

The wrapper intentionally avoids injecting sensitive/internal variables into nextConfig.env (which would be bundled to the client). Configuration is placed under a workflowStudio key instead:

{
  workflowStudio: {
    WORKFLOW_COMPUTE_BASE_URL: "...",
    WORKFLOW_TARGET_WORLD: "workflow-studio/world-remote",
    // ...
  }
}

Server Route Helpers

Use these helpers in server-only code when using proxy-trigger mode:

app/api/workflow/route.ts

import { proxyTriggerFromNext } from 'workflow-studio/next';

export async function POST(req: Request): Promise<Response> {
  const body = await req.json();
  
  const result = await proxyTriggerFromNext({
    payload: {
      workflowName: 'send-welcome-email',
      input: { userId: body.userId },
    },
  });

  return Response.json(result);
}

Webhook Proxy

Forward webhooks to the remote worker:

app/api/webhooks/[provider]/route.ts

import { proxyWebhookFromNext } from 'workflow-studio/next';

export async function POST(
  req: Request,
  { params }: { params: { provider: string } }
): Promise<Response> {
  const body = new Uint8Array(await req.arrayBuffer());
  
  return await proxyWebhookFromNext({
    provider: params.provider,
    body,
    headers: Object.fromEntries(req.headers.entries()),
  });
}

Production Checklist

Set WORKFLOW_TARGET_WORLD=workflow-studio/world-remote in deployment env
Configure WORKFLOW_COMPUTE_BASE_URL for worker URL
Configure WORKFLOW_COMPUTE_API_KEY for authentication
Run validate-ownership CLI check before first deployment
Never expose WORKFLOW_COMPUTE_API_KEY in client-side code