Using the SDK in a Next.js App

Overview

The RVE SDK works with the Next.js App Router. Install it from the private npm registry.

Before you start

Complete the SDK installation guide. It explains how to create a registry token and install the private package and its peer dependencies.

1. Import the SDK Styles

Import the stylesheet once in your root layout:

app/layout.tsx

import '@reactvideoeditor/react-video-editor/styles.css';

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

2. Create a Client Page

The editor uses browser APIs, so its page must be a Client Component.

app/editor/page.tsx

'use client';

import { ReactVideoEditor } from '@reactvideoeditor/react-video-editor/react-video-editor';

export default function EditorPage() {
  return (
    <main style={{ height: '100vh' }}>
      <ReactVideoEditor
        projectId="my-first-project"
        fps={30}
        disabledPanels={[]}
        defaultTheme="dark"
        showDefaultThemes={true}
        sidebarWidth="clamp(350px, 25vw, 500px)"
        sidebarIconWidth="57.6px"
        showIconTitles={false}
      />
    </main>
  );
}

Run your application and open /editor. The editor uses browser rendering by default. You do not need an API route for the first test.

Optional Server Rendering

For production-scale rendering, add a customRenderer with the SDK HttpRenderer:

import { HttpRenderer } from '@reactvideoeditor/react-video-editor/utils/http-renderer';

Then follow the server rendering guide.

Troubleshooting

If you see a Server Component error, confirm that the editor page starts with 'use client';.
If npm returns an authentication error, check your registry token and .npmrc settings in the installation guide.
If Remotion reports a version mismatch, make all @remotion/* package versions identical.
If the editor has no styles, confirm that the SDK stylesheet is in the root layout.