Skip to main content

将 Remotion 项目转换为应用

如果你从任何一个 Remotion 模板 开始，除了 Next.js 和 React Router 模板，你目前有一个可以启动 Remotion Studio 的应用。

🌐 If you have started from any Remotion template except the Next.js and React Router templates, you currently have an app where you can start the Remotion Studio.

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

🌐 If you would like to now turn your project into an app, follow these steps.

使用其中一个模板搭建一个新项目：

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

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

找到 <Player> 的渲染位置：

  • 在 Next.js Pages 目录模板中： 位于 pages/index.tsx 下。

  • 在 Next.js App 目录模板中： 位于 app/page.tsx 下。

  • 在 React Router 模板中： 位于 app/home.tsx 下。

选择你想在播放器中渲染的主要composition，并在<Player>中包含它的component和其他元数据。你可以从remotion文件夹中导入该组件，以便它在Studio和应用中都被导入。

如果你想去除元数据的重复，可以在一个单独的文件中定义常量，例如 DURATION_IN_FRAMES 和 FPS，然后在 Studio 和应用中都导入这些常量。

🌐 If you want to remove the duplication of metadata, you can define constants such as DURATION_IN_FRAMES and FPS in a separate file and import the constants in both the Studio and the app.

如果你使用 calculateMetadata()，请看 这里 了解如何将它与播放器一起使用。

🌐 If you use calculateMetadata(), see here how you can use it with the Player.

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

下一步​

🌐 Next steps

祝你的新应用好运！

🌐 Good luck with your new app!

  • 在 Discord 上与其他构建者聊天。
  • 如果你开发了某个应用，就把你的应用发布在#showcase上，并在x.com上标记@remotion!
  • 如果你与他人一起构建，请确保你拥有适当的 Remotion 许可证。

另请参阅​

🌐 See also

Last updated on