Using in Next.js with SSR

[gecode-es]

Is there recommended approach to using remotion-animated in a Next.js app with SSR?

I've tried using next/dynamic to dynamically render a client side only component but I'm getting nowhere fast. Any suggestions would be really appreciated.

e.g.

const AnimatedWrapper = dynamic(() => import("./AnimatedWrapper"), {
ssr: false
})

[stefanwittwer]

Hi there!
If your goal is to play a Remotion video on the client in a Next.js app, I recommend looking into @remotion/player. Remotion Animated is simply a helper library for making Remotion itself a bit more convenient for simple animations – using it with or without Remotion Animated should make a difference in this regard. Here's a link to a Next.js template for Remotion.
Hope this helps.

[gecode-es]

Yes I had been using the official Next.js template for remotion and using the Player and playing videos works great. As soon as I create a video that includes a remotion-animated component I get the following error that I believe is SSR related. N.B. the animated video I am trying to play in Next.js works fine using just the remotion preview.

\node_modules\remotion-animated\dist\index.js:1
import Animated from './Animated';
^^^^^^
SyntaxError: Cannot use import statement outside a module

Any ideas would be really appreciated.

[stefanwittwer]

Ah I see. This seems to be a problem around ESM vs. CommonJS. Have you tried these solutions here? If this doesn't help, please feel free to open an issue on this project, then a change might be necessary to the configuration of the remotion-animated package.