將 Remotion 專案轉換為應用程式

如果你是從任何 Remotion 範本（除了 Next.js 和 React Router 範本之外）開始的，你目前擁有一個可以啟動 Remotion Studio 的應用程式。

如果你現在想要將你的專案轉換為一個完整的 Web 應用程式，請依照以下步驟操作。

步驟 1：使用以下其中一個範本建立新專案

從以下範本選擇其中一個來建立新專案：

# 使用 Next.js App Router 建立新專案
npx create-video@latest --template next

步驟 2：搬移現有的 Remotion 組件

在新專案的 remotion/Root.tsx 檔案中，將範例程式碼替換為來自你現有專案 src/Root.tsx 的程式碼。

遞迴地包含所有其他組件，直到執行 npx tsc -w 不再產生任何錯誤為止。

# 執行 TypeScript 編譯器以確認無錯誤
npx tsc -w

步驟 3：複製 public 資料夾內容

將現有專案的 public 資料夾內容複製到新專案中。這包括所有靜態資源，例如圖片、字型和影片檔案。

# 將 public 資料夾內容複製到新專案
cp -r ./old-project/public/* ./new-project/public/

步驟 4：設定 Player 組件

找到 <Player> 組件的渲染位置：

Next.js Pages Router 範本：在 pages/index.tsx
Next.js App Router 範本：在 app/page.tsx
React Router 範本：在 app/home.tsx

選擇你想要在 Player 中渲染的主要 composition，並在 <Player> 中包含其組件和相關元數據。

你可以從 remotion 資料夾匯入組件，這樣它就會在 Studio 和應用程式兩者中都被匯入。

app/page.tsx

import { Player } from '@remotion/player';
import { MyComposition } from '../remotion/MyComposition';
 
// 定義共用常數以避免元數據重複
const DURATION_IN_FRAMES = 150;
const FPS = 30;
const WIDTH = 1920;
const HEIGHT = 1080;
 
export default function Home() {
  return (
    <main>
      <Player
        component={MyComposition}
        durationInFrames={DURATION_IN_FRAMES}
        fps={FPS}
        compositionWidth={WIDTH}
        compositionHeight={HEIGHT}
        style={{ width: '100%' }}
        controls
      />
    </main>
  );
}

如果你想要消除元數據的重複，可以在單獨的檔案中定義常數，例如 DURATION_IN_FRAMES 和 FPS，然後在 Studio 和應用程式兩者中匯入這些常數。

remotion/constants.ts

// 在 Studio 和 Player 兩者中共享的常數
export const DURATION_IN_FRAMES = 150;
export const FPS = 30;
export const WIDTH = 1920;
export const HEIGHT = 1080;
export const COMPOSITION_ID = 'MyComposition';

remotion/Root.tsx

import { Composition } from 'remotion';
import { MyComposition } from './MyComposition';
import {
  DURATION_IN_FRAMES,
  FPS,
  WIDTH,
  HEIGHT,
  COMPOSITION_ID,
} from './constants';
 
export const RemotionRoot = () => {
  return (
    <>
      <Composition
        id={COMPOSITION_ID}
        component={MyComposition}
        durationInFrames={DURATION_IN_FRAMES}
        fps={FPS}
        width={WIDTH}
        height={HEIGHT}
      />
    </>
  );
};

如果你使用 calculateMetadata()，請參閱這裡以了解如何在 Player 中使用它。

app/page.tsx（使用 calculateMetadata）

import { Player } from '@remotion/player';
import { MyComposition, calculateMyMetadata } from '../remotion/MyComposition';
 
export default function Home() {
  return (
    <Player
      component={MyComposition}
      calculateMetadata={calculateMyMetadata}
      compositionWidth={1920}
      compositionHeight={1080}
      fps={30}
      durationInFrames={150}
      inputProps={{ text: '你好，世界！' }}
    />
  );
}

步驟 5：套用 Webpack 覆寫設定

如果你在 remotion.config.ts 中定義了任何 Webpack 覆寫，請查看如何將其套用到你的框架中。

remotion.config.ts

import { Config } from '@remotion/cli/config';
import { enableTailwind } from '@remotion/tailwind';
 
Config.overrideWebpackConfig((config) => {
  return enableTailwind(config);
});

對於 Next.js，在 next.config.js 中套用相同的覆寫：

next.config.js

const { enableTailwind } = require('@remotion/tailwind');
 
/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    return enableTailwind(config);
  },
};
 
module.exports = nextConfig;

後續步驟

恭喜你完成轉換！以下是一些建議的後續步驟：