将 Remotion 项目转换为应用程序

如果您从任何 Remotion 模板 开始，除了 Next.js 和 Remix 模板之外，您目前拥有一个应用程序，您可以在其中启动 Remotion Studio。

如果您现在想将您的项目转换为应用程序，请按照以下步骤操作。

1

使用以下模板之一搭建一个新项目：

• Next.js（应用程序目录）
• Next.js（应用程序目录 + TailwindCSS）
• Next.js（页面目录）
• Remix

2

在新项目的 remotion/Root.tsx 文件中，用现有项目的 src/Root.tsx 中的代码替换示例代码。递归包含所有其他组件，直到 npx tsc -w 不再报错。

3

将 public 文件夹的内容复制到新项目中。

4

找到 <Player> 渲染的位置：

• 在 Next.js 页面目录模板中： 在 pages/index.tsx 下。

• 在 Next.js 应用程序目录模板中： 在 app/page.tsx 下。

• 在 Remix 模板中： 在 app/routes/_index.tsx 下。

选择您要在 Player 中呈现的主要 组合，并在 <Player> 中包含其 component 和其他元数据。您可以从 remotion 文件夹导入组件，以便在 Studio 和应用程序中都导入。

如果要消除元数据的重复，您可以在单独的文件中定义常量，如 DURATION_IN_FRAMES 和 FPS，并在 Studio 和应用程序中导入这些常量。

如果您使用 calculateMetadata()，请参阅此处了解如何在 Player 中使用它。

5

如果您在 remotion.config.ts 中定义了任何 Webpack 覆盖，请查看如何将其应用到您的框架中。

下一步

祝您的新应用好运！

• 在 Discord 上与其他构建者交流。
• 在 #showcase 上展示您的应用，并在 x.com 上标记 @remotion 如果您构建了什么！
• 如果与他人一起构建，请确保您拥有适当的 Remotion 许可证。

另请参阅

• 在现有项目中安装