Next.js — @pixodesk/svg-animator-react

The React component in a Next.js app.

The component renders real SVG markup on the server and starts the player in an effect on the client, so it works in the App Router — mark the file that uses it as a client component:

'use client';
import { SvgAnimationPlayer } from '@pixodesk/svg-animator-react';
import animation from './animation.json';

export default function Hero() {
  return <SvgAnimationPlayer doc={animation} playUsingActionTriggers />;
}

JSON imports work out of the box in Next.js; for a CSS-flavor SVG use @svgr/webpack.