Simple Next.js Example

A basic Next.js integration with React Video Editor.

Overview

This example demonstrates the simplest way to integrate React Video Editor into a Next.js application.

Project Setup

1. Create Next.js Project

npx create-next-app@latest video-editor-demo --typescript --tailwind --eslint
cd video-editor-demo

2. Install Dependencies

npm install react-video-editor

3. Create the Video Editor Component

Create components/VideoEditor.tsx:

'use client';

import { ReactVideoEditor } from 'react-video-editor';

export default function VideoEditor() {
  return (
    <div className="w-full h-screen">
      <ReactVideoEditor
        // Basic configuration
        width="100%"
        height="100%"
      />
    </div>
  );
}

4. Update the Main Page

Update app/page.tsx:

import VideoEditor from '@/components/VideoEditor';

export default function Home() {
  return (
    <main className="min-h-screen">
      <VideoEditor />
    </main>
  );
}

5. Run the Application

npm run dev

Visit http://localhost:3000 to see your video editor in action.

Key Features

Client-side Only: Uses 'use client' directive for Next.js 13+ App Router
Responsive Design: Full-screen video editor
TypeScript Support: Fully typed components
Tailwind CSS: Styled with Tailwind classes

Configuration Options

<ReactVideoEditor
  width="100%"
  height="100%"
  theme="dark"
  language="en"
  // Add more configuration options
/>

File Structure

video-editor-demo/
├── app/
│   └── page.tsx
├── components/
│   └── VideoEditor.tsx
├── package.json
└── next.config.js

Next Steps

Add video file upload functionality
Implement custom controls
Add video processing features
Check out the Advanced Example for more complex features

Troubleshooting

Common Issues

Hydration Errors: Ensure the component is client-side only
Import Errors: Check that all dependencies are installed
Styling Issues: Verify Tailwind CSS is properly configured

Getting Help

Check the Troubleshooting guide
Review the Components documentation
Open an issue on our GitHub repository

Simple Example