WebPlayer with Next.js

Installation

npm

npm install @car-cutter/next-webplayer

Yarn

yarn add @car-cutter/next-webplayer

pnpm

pnpm add @car-cutter/next-webplayer

Usage

Next.js 13+ (React 18+)

import { WebPlayer } from "@car-cutter/next-webplayer";

Next.js 10-12 (React 16.8 - 17.x)

import { WebPlayer } from "@car-cutter/next-webplayer/legacy";

Then, use the component as: <WebPlayer compositionUrl={url} />

Quick start

Next.js 13+ (React 18+)

/app/page.tsx

"use client"; // Mandatory only if we use events handlers

import { WebPlayer } from "@car-cutter/next-webplayer";

export default function Home() {
  return (
    <main>
      <h1>Next App</h1>
      <WebPlayer
        style={{ maxWidth: "800px", marginInline: "auto", marginTop: "16px" }}
        compositionUrl="https://cdn.car-cutter.com/libs/web-player/v3/demos/composition.json"
        infiniteCarrousel
        onCompositionLoaded={() => console.log("Composition loaded")}
      />
    </main>
  );
}

Next.js 10-12 (React 16.8 - 17.x)

/pages/index.js

"use client"; // Mandatory only if we use events handlers

import { WebPlayer } from "@car-cutter/next-webplayer/legacy";

export default function Home() {
  return (
    <main>
      <h1>Next App</h1>
      <WebPlayer
        style={{ maxWidth: "800px", marginInline: "auto", marginTop: "16px" }}
        compositionUrl="https://cdn.car-cutter.com/libs/web-player/v3/demos/composition.json"
        infiniteCarrousel
        onCompositionLoaded={() => console.log("Composition loaded")}
      />
    </main>
  );
}

Version Compatibility

• Next.js 13 and above (React 18+): Use the default import from @car-cutter/next-webplayer
• Next.js 10-12 (React 16.8 to 17.x): Use the legacy import from @car-cutter/next-webplayer/legacy
• Next.js versions below 10 are not supported

Next steps

For more customisation, take a look at available props in the Properties section