@editframe/nextjs-plugin

Next.js plugin for Editframe development — zero-config local video transcoding and asset serving.

Install

npm install --save-dev @editframe/nextjs-plugin

Usage

Wrap your Next.js config with withEditframe:

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

export default withEditframe(
  { root: "./src", cacheRoot: "./cache" },
  {
    // your existing Next.js config
  },
);

// next.config.js (CommonJS)
const { withEditframe } = require("@editframe/nextjs-plugin");

module.exports = withEditframe(
  { root: "./src", cacheRoot: "./cache" },
  {
    // your existing Next.js config
  },
);

That's it. Run next dev as normal.

How it works

In development, the plugin starts a sidecar HTTP server (default port 3001) that handles all Editframe media API requests. Next.js automatically proxies /api/v1/* and /@ef* requests to the sidecar, so your composition elements make same-origin requests with no CORS configuration required.

Editframe elements (ef-video, ef-audio, ef-image) automatically detect the localhost origin and route dev requests correctly — no additional configuration needed in your app code.

Options

| Option | Type | Default | Description | |---|---|---|---| | root | string | required | Base directory for resolving local media file paths | | cacheRoot | string | required | Directory for cached transcoded assets | | port | number | 3001 | Port for the sidecar dev server |

Environment variables

| Variable | Description | |---|---| | EF_TOKEN | Your Editframe API token (required for URL signing) | | EF_HOST | Override the Editframe API host (optional) |