Skip to main content

在 Next.js 中使用 @remotion/renderer

[@remotion/renderer](/docs/renderer) 包依赖于无头浏览器和 FFmpeg，这使得在 Next.js 中使用它有点棘手。

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

部署到 Vercel​

🌐 Deploy to Vercel

部署 Vercel 模板以在云端渲染你的视频：

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

想了解更多，请访问 Vercel 上的 Remotion 页面。

🌐 To learn more, visit the Remotion on Vercel page.

在自托管 Next.js 时​

🌐 While self-hosting Next.js

如果你没有部署到 Vercel，并且确信没有遇到函数大小限制，你可能能够在 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).

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

module.exports = nextConfig;

还要注意以下事项：

🌐 Also be aware of the following:

  • 你不能在 API 路由中使用 @remotion/bundler，因为它包含 Webpack，而无法将 Webpack 与 Webpack 打包。相反，应使用 @remotion/bundler 在 API 路由之外创建一个包，然后在你的 API 路由中使用生成的文件夹。
  • @remotion/renderer 包需要来自 node_modules 的 FFmpeg 二进制文件。由于正在打包一个 API 路由，你可能需要覆盖 Webpack 配置，以确保 remotion 二进制文件被包含在其中。

另请参阅​

🌐 See also

Last updated on