withWorkflow

Configures webpack/turbopack loaders to transform workflow code ("use step"/"use workflow" directives)

API Signature

Parameters

Options

The second parameter accepts an optional configuration object:

Returns

Returns an async function (phase: string, ctx: { defaultConfig: NextConfig }) => Promise<NextConfig> compatible with the next.config.ts default export.

Environment Behavior

When running locally (no VERCEL_DEPLOYMENT_ID) and WORKFLOW_TARGET_WORLD is not already set:

• Sets WORKFLOW_TARGET_WORLD to 'local'
• Sets WORKFLOW_LOCAL_DATA_DIR to '.next/workflow-data'

When running locally (no VERCEL_DEPLOYMENT_ID):

• If workflows.local.port is provided, sets PORT to that value

When running on Vercel (VERCEL_DEPLOYMENT_ID is present) and WORKFLOW_TARGET_WORLD is not already set:

• Sets WORKFLOW_TARGET_WORLD to 'vercel'

During the development server phase (phase-development-server):

• Sets WORKFLOW_PUBLIC_MANIFEST to '1' if not already set

Usage

To enable "use step" and "use workflow" directives while developing locally or deploying to production, wrap your nextConfig with withWorkflow.

import { withWorkflow } from "workflow/next"; 
import type { NextConfig } from "next";
 
const nextConfig: NextConfig = {
  // … rest of your Next.js config
};

// optional, but this shows the actual supported shape
const workflowConfig = {
  workflows: {
    local: {
      port: 3001,
    },
  },
};

export default withWorkflow(nextConfig, workflowConfig); 

If you are exporting a function in your next.config you will need to ensure you call the function returned from withWorkflow.

import { NextConfig } from "next";
import { withWorkflow } from "workflow/next";
import createNextIntlPlugin from "next-intl/plugin";

const withNextIntl = createNextIntlPlugin();

export default async function config(
  phase: string,
  ctx: {
    defaultConfig: NextConfig
  }
): Promise<NextConfig> {
  let nextConfig: NextConfig | typeof config = {};

  for (const configModifier of [withNextIntl, withWorkflow]) {
    nextConfig = configModifier(nextConfig);

    if (typeof nextConfig === "function") {
      nextConfig = await nextConfig(phase, ctx);
    }
  }
  return nextConfig;
}