Skip to main content

WebPlayer with Next.js

Installation​

tip

When you use the Web Player as a dependency in your application, you need to update it whenever the package is updated, as it evolves frequently. See Updating to the Latest Version.

npm install @car-cutter/next-webplayer

Usage​

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

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

Quick start​

/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>
  );
}

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

Updating to the Latest Version​

To update @car-cutter/next-webplayer to the latest version, run:

npm install @car-cutter/next-webplayer@latest

You can check which version is currently installed with:

npm list @car-cutter/next-webplayer
tip

After updating, rebuild your application to ensure the new version is picked up correctly:

next build

Next steps​

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