nextjs-plugin

The default plugin provides local navigation into the installed browser editor. Application routes stay in Next.js; runtime state, compilation, media, and exports belong to the selected bridge.

Install the runtime from Agent plugins, then install the adapter:

npm install @editframe/nextjs-plugin

Define shared, server-only options. Use the absolute path of your installed bridge or a verified componentRoot:

// editframe.config.ts
export const editframeOptions = {
  projectRoot: process.cwd(),
  executable: "/absolute/editframe-bridge",
};

// next.config.ts
import { withEditframe } from "@editframe/nextjs-plugin";
import { editframeOptions } from "./editframe.config";

export default withEditframe(editframeOptions, {
  // Your existing Next.js configuration.
});

Add the Node runtime route handler. Adjust the relative import if your application uses src/app:

// app/api/editframe/workspace/route.ts
import { createEditframeRoute } from "@editframe/nextjs-plugin";
import { editframeOptions } from "../../../../editframe.config";

export const runtime = "nodejs";
export const GET = createEditframeRoute(editframeOptions);

Navigate to /@ef/workspace on your local HTTP development server. The rewrite forwards to the route handler, which redirects to the authenticated browser editor. The application never receives the editor bearer token. Local navigation is required; this handler is not a production hosted editor endpoint.

Watch application source

Both calls accept the same optional source configuration as the Vite adapter: explicitly selected existing project-relative files, an entry path or composition ID, and an onError callback. The bridge owns compilation and revision checks. Configure those options in the shared server-only file so both calls use the same selection.

Migrating previous configuration

The default entry point no longer starts a legacy sidecar media server. See CLI migration. Legacy advanced application integrations are explicitly separated under @editframe/nextjs-plugin/advanced.