Skip to main content

Using @remotion/renderer in Next.js

The @remotion/renderer package has dependencies on a headless browser and FFmpeg, which makes using it in Next.js a bit tricky.

Deploy to Vercel​

Deploy the Vercel template to render your videos in the cloud:

Deploy with Vercel

To learn more, visit the Remotion on Vercel page.

While self-hosting Next.js​

If you are not deploying to Vercel and are sure that you are not running into function size limits, you may be able to use the renderer in Next.js (not officially supported).

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  serverExternalPackages: ['@remotion/renderer'],
};

module.exports = nextConfig;

Also be aware of the following:

  • You cannot use @remotion/bundler inside an API route, because it includes Webpack, and it's not possible to bundle Webpack with Webpack.
    Instead, use @remotion/bundler to create a bundle outside the API route and then use the resulting folder in your API route.

  • The @remotion/renderer package requires an FFmpeg binary from node_modules. Because an API route is being bundled, you might need to override the Webpack configuration to ensure the remotion binary is being included in it.

See also​