使用 Remotion Next.js App Router 构建可编程视频应用template-next-app-tailwind 模板完整指南【免费下载链接】remotion Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotion本指南围绕 Remotion 官方 Next.js 模板template-next-app-tailwind展开讲解如何在 Next.jsApp Router TailwindCSS应用中嵌入remotion/player实时预览视频并借助remotion/lambda把视频渲染放到 AWS Lambda 上按需执行。读完本文你将掌握模板的目录结构、五大核心命令、前后端共享的类型设计、Play 组件嵌入方式以及从本机渲染到云端无服务器出片的完整链路可直接在真实项目中照抄落地。模板定位面向程序化视频应用的一体化起点packages/template-next-app-tailwind是 Remotion 官方为构建程序化视频programmatic video应用而设计的 Next.js 模板。所谓程序化视频应用典型形态是一个 Web 页面用户在浏览器里编辑文案/参数 → 页面内的播放器实时预览合成 → 点击渲染按钮 → 服务器通过 API 调用远程渲染 → 返回视频文件链接供用户下载。这一模板恰好把该链路的三个关键拼图集成在同一个工程中Remotion 视频合成用 React 组件描述视频画面见src/remotion/目录remotion/player把合成视频当作一个可交互的 HTML 播放器嵌入到 Next.js 页面中实现零等待的实时预览remotion/lambda把渲染视频这一计算密集型任务分发到 AWS Lambda 执行避免在 Node.js 服务端做重负载渲染。在技术选型上模板明确使用Next.js App Router TailwindCSS。如果你需要其他形态本仓库monorepo中还有两个等价变体可对照参考不使用 Tailwind 的 App Router 版本 template-next-app以及 Pages Router 版本 template-next-pages。技术栈与依赖从 package.json 可以看到模板的完整技术栈框架层next16.2.11、react19.2.3、react-dom19.2.3Remotion 核心remotion、remotion/cli、remotion/bundler、remotion/player、remotion/lambda、remotion/google-fonts、remotion/paths、remotion/shapes样式tailwindcss4.2.0tailwindcss/postcss以及 Remotion 侧集成 Tailwind 用的remotion/tailwind-v4类型校验zod4.5.4用于跨前后端共享 props 的 schema工具clsx、tailwind-mergesrc/lib/utils.ts中通常用它们封装 className 合并。目录结构速览src/ app/ api/lambda/render/route.ts # 触发渲染的 API 路由POST api/lambda/progress/route.ts # 查询渲染进度的 API 路由POST layout.tsx / page.tsx # 首页内嵌 Player 渲染控制 components/ # 页面 UIRenderControls、ProgressBar 等 helpers/use-rendering.ts # 前端渲染状态机 轮询逻辑 lambda/api.ts # 前端调用后端 API 的封装 lib/utils.ts remotion/ index.ts # Remotion 打包入口deploy 时指定 Root.tsx # 注册 Composition MyComp/ # 示例合成Main/NextLogo/Rings/TextFade webpack-override.mjs # 让 Tailwind 样式进入 Remotion 打包 types/ constants.ts # 共享常量 zod schema schema.ts # API 请求/响应 schema config.mjs # Lambda 部署参数集中配置 deploy.mjs # 一键部署 Lambda 函数、S3 Bucket、站点 remotion.config.ts # Remotion 打包配置Rspack JPEG快速开始三种初始化方式模板的 README 给出两条上手路径任选其一方式一GitHub 模板仓库克隆进入目录后安装依赖npm i方式二使用create-video脚手架一键生成npx create-videolatest --next-tailwind这条命令会在交互式引导下直接生成一个与当前仓库等价的 Next.js Tailwind 工程。之后启动开发环境npm run dev在浏览器打开本地地址即可看到首页页面中通过remotion/player渲染了一段示例合成动画并带有文字输入框与渲染控制面板。任何一次改动例如修改输入文字播放器都会即时反映——这正是把视频组件化 实时预览带入 Web 应用的核心体验。五大常用命令详解模板在 package.json 中预置了脚本同时也支持直接调用 Remotion CLI。下表汇总了开发与部署中最常用的操作目的命令说明启动 Next.js 开发服务器npm run dev等价于next dev打开 Remotion Studionpm run remotion等价于npx remotion studio可逐帧调试合成本地渲染视频npm run render等价于npx remotion render升级 Remotionnpx remotion upgrade将项目内的 Remotion 相关包升级到一致版本部署到 AWS Lambdanpm run deploy等价于node deploy.mjs见下文其中 Studio 与本地渲染属于在开发机上直接出片的场景npx remotion studio会打开图形化界面逐帧预览、拖动时间线、调整输入 propsnpx remotion render则使用当前remotion.config.ts与本机环境渲染视频文件。在 Next.js 页面中嵌入播放器remotion/player首页 src/app/page.tsx 展示了 Player 的典型用法。核心代码use client; import { Player } from remotion/player; import { useMemo, useState } from react; import { z } from zod; import { Main } from ../remotion/MyComp/Main; import { RenderControls } from ../components/RenderControls; // ... 其他导入 const Home: NextPage () { const [text, setText] useStatestring(defaultMyCompProps.title); const inputProps: z.infertypeof CompositionProps useMemo(() { return { title: text }; }, [text]); return ( div div classNamemax-w-screen-md m-auto mb-5 px-4 Player component{Main} inputProps{inputProps} durationInFrames{DURATION_IN_FRAMES} fps{VIDEO_FPS} compositionHeight{VIDEO_HEIGHT} compositionWidth{VIDEO_WIDTH} style{{ width: 100% }} controls autoPlay loop initiallyMuted / RenderControls text{text} setText{setText} inputProps{inputProps} / Tips / /div /div ); };几个值得注意的要点component{Main}直接传入 Remotion 的合成组件而非字符串 ID这是 Player 与 Studio 渲染的最大区别——不需要经过打包即可在浏览器内渲染尺寸三件套compositionWidth/compositionHeight为画布逻辑尺寸本例 1280×720实际页面宽度由 CSS 决定代码注释特别提醒播放器自带样式的优先级高于 Tailwind class因此这里用内联style{{ width: 100% }}来铺满容器inputProps即用户输入到视频的数据与输入框的useState联动实现改文字即改视频播放控制controls显示控制条autoPlay/loop/initiallyMuted让预览体验接近成品视频页面根布局 layout.tsx 导入全局样式styles/global.css其中定义了bg-background等 Tailwind 主题 token。合成组件与共享类型一处定义、三端复用模板的巧妙之处在于把视频的参数类型集中在一处供 Remotion 打包、Player 预览、后端 API 三处共享。常量与 zod Schematypes/constants.ts 定义了合成名、参数 schema 与画布规格import { z } from zod; export const COMP_NAME MyComp; export const CompositionProps z.object({ title: z.string(), }); export const defaultMyCompProps: z.infertypeof CompositionProps { title: Next.js and Remotion, }; export const DURATION_IN_FRAMES 200; // 总时长 200 帧 export const VIDEO_WIDTH 1280; // 横向 16:9 export const VIDEO_HEIGHT 720; export const VIDEO_FPS 30; // 帧率 30fpsz.object定义 props 类型后z.infertypeof CompositionProps可以把TypeScript 类型直接推导出来前端useState、API 入参都能引用它彻底消除类型漂移帧数换算时长200 帧 ÷ 30fps ≈ 6.67 秒。注册合成src/remotion/Root.tsx 是 Remotion 的组件注册表声明了示例中实际存在的两个合成Composition id{COMP_NAME} // MyComp component{Main} durationInFrames{DURATION_IN_FRAMES} // 200 fps{VIDEO_FPS} // 30 width{VIDEO_WIDTH} // 1280 height{VIDEO_HEIGHT} // 720 defaultProps{defaultMyCompProps} / Composition idNextLogo component{NextLogo} durationInFrames{300} fps{30} width{140} height{140} defaultProps{{ outProgress: 0 }} /示例合成组件位于 src/remotion/MyComp/Main.tsx、NextLogo.tsx、Rings.tsx、TextFade.tsx入口文件 src/remotion/index.ts 同时是deploy.mjs上传到 S3 的打包入口。若新增视频模板只需按同样模式写组件 → 在Root.tsx注册Composition→ 在types/constants.ts维护 props schema。本机渲染体验Studio 与 CLI在无需云端的场景下开发阶段可以直接在本机渲染npx remotion studio # 打开 Remotion Studio 图形界面 npx remotion render # 依据 remotion.config.ts 在本机渲染默认合成渲染行为由根目录的 remotion.config.ts 控制import { Config } from remotion/cli/config; import { webpackOverride } from ./src/remotion/webpack-override.mjs; Config.setRspack(true); // 启用 Rspack 作为打包器 Config.setVideoImageFormat(jpeg); // 视频帧编码使用 JPEG Config.overrideBundlerConfig(webpackOverride);setRspack(true)让 Remotion 使用基于 Rust 的 Rspack 打包器提高打包与预览速度overrideBundlerConfig(webpackOverride)把 Tailwind v4 的 PostCSS 处理接进 Remotion 的打包流程使Composition内也能使用 Tailwind 类实现见 webpack-override.mjs。需要指出的是该配置文件只对CLI / Studio生效。使用 Node.js API例如remotion/renderer或remotion/lambda时应把相应选项直接作为 API 参数传入。基于 AWS Lambda 的无服务器渲染链路这是模板价值最高的部分把渲染从开发机搬到 AWS。整条链路为——浏览器按钮 → Next.js API 路由 →renderMediaOnLambda提交渲染任务 → 轮询getRenderProgress→ 完成后返回可下载的视频 URL。第一步集中配置 Lambda 参数config.mjs 是唯一需要人工编辑的部署配置文件/** * Use autocomplete to get a list of available regions. * type {import(remotion/lambda).AwsRegion} */ export const REGION us-east-1; export const SITE_NAME my-next-app; export const RAM 3009; // Lambda 内存MB export const DISK 10240; // /tmp 磁盘MB export const TIMEOUT 240; // 超时秒各参数的语义与影响参数默认值说明REGIONus-east-1AWS 区域编辑器会提供AwsRegion类型补全SITE_NAMEmy-next-app部署到 S3 的站点名serveUrl也用于 API 引用RAM3009Lambda 函数内存直接影响并发渲染能力与费用DISK10240Lambda 临时磁盘/tmp上限MB复杂合成需更大空间TIMEOUT240单个 Lambda 渲染任务允许运行的最大秒数deploy.mjs与两个 API 路由均从该文件读取配置因此修改参数后必须重新部署README 明确要求。第二步填充 AWS 凭证按 README 步骤将.env.example本模板中真实存在复制为.env并填入你的 AWS 凭证参照 Remotion 官方的 Lambda setup 指南完成 AWS 侧初始化创建 IAM 用户、授予权限等获得AWS_ACCESS_KEY_ID与AWS_SECRET_ACCESS_KEY。从 deploy.mjs 的凭证检查逻辑可以看到它同时兼容两组环境变量命名方便你在既有 AWS SDK 命名与 Remotion 命名之间选择AWS_ACCESS_KEY_ID或REMOTION_AWS_ACCESS_KEY_IDAWS_SECRET_ACCESS_KEY或REMOTION_AWS_SECRET_ACCESS_KEY如果凭证缺失脚本不会直接失败而是打印提示并process.exit(0)退出说明Lambda 渲染未配置。第三步执行 deploy.mjsnode deploy.mjs脚本依次完成三件工作内部使用remotion/lambda的 APIdeployFunction部署/复用渲染函数createCloudWatchLogGroup: true便于在 CloudWatch 查日志内存、超时、磁盘均取自config.mjs返回functionName及是否已存在getOrCreateBucket在指定区域确保渲染用的 S3 Bucket 存在不存在则创建返回bucketNamedeploySite把 Remotion 合成入口src/remotion/index.ts打包并上传为站点options: { webpackOverride }保证 Tailwind 样式被正确打包。部署成功后终端会提示You now have everything you need to render videos!。README 同时强调在以下三种情况后都应重新运行node deploy.mjs修改了视频模板src/remotion/下的组件与合成修改了config.mjs中的参数把 Remotion 升级到了新版本。第四步两个 API 路由串联渲染与进度查询前端不直接持有 AWS 密钥而是通过 Next.js API 路由中转。前端封装见 src/lambda/api.tsrenderVideo()向/api/lambda/render发起 POSTgetProgress()向/api/lambda/progress发起 POST二者统一解析{ type: error }响应并抛错。触发渲染/src/app/api/lambda/render/route.ts 校验凭证后调用核心 APIconst result await renderMediaOnLambda({ codec: h264, functionName: speculateFunctionName({ diskSizeInMb: DISK, memorySizeInMb: RAM, timeoutInSeconds: TIMEOUT, }), region: REGION as AwsRegion, serveUrl: SITE_NAME, composition: body.id, inputProps: body.inputProps, framesPerLambda: 10, downloadBehavior: { type: download, fileName: video.mp4, }, });其中speculateFunctionName()依据config.mjs的三项参数推断出函数名——这正是改了 config 必须重跑 deploy的原因函数名由这些参数决定参数变化即意味着函数需要重新创建。framesPerLambda: 10表示每个 Lambda 实例负责渲染 10 帧控制单任务粒度与并发拆分downloadBehavior让产物以附件形式下载并命名为video.mp4。查询进度/src/app/api/lambda/progress/route.ts 调用getRenderProgress并把三态结果映射给前端遇fatalErrorEncountered→ 返回{ type: error, message: errors[0].message }渲染完成 → 返回{ type: done, url, size }进行中 → 返回{ type: progress, progress: Math.max(0.03, renderProgress.overallProgress) }0.03下限保证进度条起步可见。请求体与响应均以 types/schema.ts 中的 zod schema 为准RenderRequest、ProgressRequest与三态ProgressResponse两个路由通过src/helpers/api-response.ts暴露的executeApi包装器完成校验与统一响应格式。第五步前端的渲染状态机与轮询src/helpers/use-rendering.ts 实现了完整的渲染生命周期管理用一个判别联合类型描述状态init → invoking → rendering含 progress→ done | error核心流程为点击渲染后先置invoking并调用renderVideo拿到renderId与bucketName随后进入while (pending)轮询循环——每隔1 秒await wait(1000)调用一次getProgress根据返回的三态推进 UI出错时记录error完成时保存url与文件size并通过undo()一键回到初始态。配套的ProgressBar、RenderControls、DownloadButton等组件见src/components/把上述状态渲染为进度条、错误提示与下载按钮。部署到 Vercel 时的构建链由于vercel.json的存在本模板可被 Vercel 直接识别{ buildCommand: node deploy.mjs next build }也就是说Vercel 云端构建时会先执行 Lambda 部署脚本、再执行 Next.js 构建。要让它顺利通过必须在 Vercel 的项目环境变量中配置好 AWS 凭证即REMOTION_AWS_ACCESS_KEY_ID/REMOTION_AWS_SECRET_ACCESS_KEY。这保证了前端域名上线时渲染后端也总是处于已部署状态。常见误区与注意事项综合 README 与源码中的检查逻辑实践中有几条高频坑点需要规避改完config.mjs忘了重跑deploy.mjsspeculateFunctionName基于内存/磁盘/超时推断函数名deploySite上传的是旧站点渲染极可能报找不到函数/站点只在.env填了一组凭证却用了另一组命名deploy 与 render 路由分别兼容AWS_*与REMOTION_AWS_*两套变量名请保持一致在 Node.js API 中使用remotion.config.ts该文件只作用于 CLI/StudioLambda 渲染参数必须显式传入renderMediaOnLambda模板正是这么做的升级 Remotion 版本升级后应重跑node deploy.mjs否则云端函数与本地版本不匹配可能导致兼容性错误。进一步探索对照非 Tailwind 的 App Router 版本template-next-app对照 Pages Router 版本template-next-pages若想脱离模板理解底层可阅读 Remotion Lambda 的客户端 SDK 与类型定义packages/lambda、packages/lambda-client以及播放器内核 packages/player模板使用与许可证以仓库根目录 LICENSE.md 为准README 也提示部分实体公司可能需要购买商用许可。【免费下载链接】remotion Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotion创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 使用 Remotion + Next.js App Router 构建可编程视频应用：template-next-app-tailwind 模板完整指南
使用 Remotion Next.js App Router 构建可编程视频应用template-next-app-tailwind 模板完整指南【免费下载链接】remotion Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotion本指南围绕 Remotion 官方 Next.js 模板template-next-app-tailwind展开讲解如何在 Next.jsApp Router TailwindCSS应用中嵌入remotion/player实时预览视频并借助remotion/lambda把视频渲染放到 AWS Lambda 上按需执行。读完本文你将掌握模板的目录结构、五大核心命令、前后端共享的类型设计、Play 组件嵌入方式以及从本机渲染到云端无服务器出片的完整链路可直接在真实项目中照抄落地。模板定位面向程序化视频应用的一体化起点packages/template-next-app-tailwind是 Remotion 官方为构建程序化视频programmatic video应用而设计的 Next.js 模板。所谓程序化视频应用典型形态是一个 Web 页面用户在浏览器里编辑文案/参数 → 页面内的播放器实时预览合成 → 点击渲染按钮 → 服务器通过 API 调用远程渲染 → 返回视频文件链接供用户下载。这一模板恰好把该链路的三个关键拼图集成在同一个工程中Remotion 视频合成用 React 组件描述视频画面见src/remotion/目录remotion/player把合成视频当作一个可交互的 HTML 播放器嵌入到 Next.js 页面中实现零等待的实时预览remotion/lambda把渲染视频这一计算密集型任务分发到 AWS Lambda 执行避免在 Node.js 服务端做重负载渲染。在技术选型上模板明确使用Next.js App Router TailwindCSS。如果你需要其他形态本仓库monorepo中还有两个等价变体可对照参考不使用 Tailwind 的 App Router 版本 template-next-app以及 Pages Router 版本 template-next-pages。技术栈与依赖从 package.json 可以看到模板的完整技术栈框架层next16.2.11、react19.2.3、react-dom19.2.3Remotion 核心remotion、remotion/cli、remotion/bundler、remotion/player、remotion/lambda、remotion/google-fonts、remotion/paths、remotion/shapes样式tailwindcss4.2.0tailwindcss/postcss以及 Remotion 侧集成 Tailwind 用的remotion/tailwind-v4类型校验zod4.5.4用于跨前后端共享 props 的 schema工具clsx、tailwind-mergesrc/lib/utils.ts中通常用它们封装 className 合并。目录结构速览src/ app/ api/lambda/render/route.ts # 触发渲染的 API 路由POST api/lambda/progress/route.ts # 查询渲染进度的 API 路由POST layout.tsx / page.tsx # 首页内嵌 Player 渲染控制 components/ # 页面 UIRenderControls、ProgressBar 等 helpers/use-rendering.ts # 前端渲染状态机 轮询逻辑 lambda/api.ts # 前端调用后端 API 的封装 lib/utils.ts remotion/ index.ts # Remotion 打包入口deploy 时指定 Root.tsx # 注册 Composition MyComp/ # 示例合成Main/NextLogo/Rings/TextFade webpack-override.mjs # 让 Tailwind 样式进入 Remotion 打包 types/ constants.ts # 共享常量 zod schema schema.ts # API 请求/响应 schema config.mjs # Lambda 部署参数集中配置 deploy.mjs # 一键部署 Lambda 函数、S3 Bucket、站点 remotion.config.ts # Remotion 打包配置Rspack JPEG快速开始三种初始化方式模板的 README 给出两条上手路径任选其一方式一GitHub 模板仓库克隆进入目录后安装依赖npm i方式二使用create-video脚手架一键生成npx create-videolatest --next-tailwind这条命令会在交互式引导下直接生成一个与当前仓库等价的 Next.js Tailwind 工程。之后启动开发环境npm run dev在浏览器打开本地地址即可看到首页页面中通过remotion/player渲染了一段示例合成动画并带有文字输入框与渲染控制面板。任何一次改动例如修改输入文字播放器都会即时反映——这正是把视频组件化 实时预览带入 Web 应用的核心体验。五大常用命令详解模板在 package.json 中预置了脚本同时也支持直接调用 Remotion CLI。下表汇总了开发与部署中最常用的操作目的命令说明启动 Next.js 开发服务器npm run dev等价于next dev打开 Remotion Studionpm run remotion等价于npx remotion studio可逐帧调试合成本地渲染视频npm run render等价于npx remotion render升级 Remotionnpx remotion upgrade将项目内的 Remotion 相关包升级到一致版本部署到 AWS Lambdanpm run deploy等价于node deploy.mjs见下文其中 Studio 与本地渲染属于在开发机上直接出片的场景npx remotion studio会打开图形化界面逐帧预览、拖动时间线、调整输入 propsnpx remotion render则使用当前remotion.config.ts与本机环境渲染视频文件。在 Next.js 页面中嵌入播放器remotion/player首页 src/app/page.tsx 展示了 Player 的典型用法。核心代码use client; import { Player } from remotion/player; import { useMemo, useState } from react; import { z } from zod; import { Main } from ../remotion/MyComp/Main; import { RenderControls } from ../components/RenderControls; // ... 其他导入 const Home: NextPage () { const [text, setText] useStatestring(defaultMyCompProps.title); const inputProps: z.infertypeof CompositionProps useMemo(() { return { title: text }; }, [text]); return ( div div classNamemax-w-screen-md m-auto mb-5 px-4 Player component{Main} inputProps{inputProps} durationInFrames{DURATION_IN_FRAMES} fps{VIDEO_FPS} compositionHeight{VIDEO_HEIGHT} compositionWidth{VIDEO_WIDTH} style{{ width: 100% }} controls autoPlay loop initiallyMuted / RenderControls text{text} setText{setText} inputProps{inputProps} / Tips / /div /div ); };几个值得注意的要点component{Main}直接传入 Remotion 的合成组件而非字符串 ID这是 Player 与 Studio 渲染的最大区别——不需要经过打包即可在浏览器内渲染尺寸三件套compositionWidth/compositionHeight为画布逻辑尺寸本例 1280×720实际页面宽度由 CSS 决定代码注释特别提醒播放器自带样式的优先级高于 Tailwind class因此这里用内联style{{ width: 100% }}来铺满容器inputProps即用户输入到视频的数据与输入框的useState联动实现改文字即改视频播放控制controls显示控制条autoPlay/loop/initiallyMuted让预览体验接近成品视频页面根布局 layout.tsx 导入全局样式styles/global.css其中定义了bg-background等 Tailwind 主题 token。合成组件与共享类型一处定义、三端复用模板的巧妙之处在于把视频的参数类型集中在一处供 Remotion 打包、Player 预览、后端 API 三处共享。常量与 zod Schematypes/constants.ts 定义了合成名、参数 schema 与画布规格import { z } from zod; export const COMP_NAME MyComp; export const CompositionProps z.object({ title: z.string(), }); export const defaultMyCompProps: z.infertypeof CompositionProps { title: Next.js and Remotion, }; export const DURATION_IN_FRAMES 200; // 总时长 200 帧 export const VIDEO_WIDTH 1280; // 横向 16:9 export const VIDEO_HEIGHT 720; export const VIDEO_FPS 30; // 帧率 30fpsz.object定义 props 类型后z.infertypeof CompositionProps可以把TypeScript 类型直接推导出来前端useState、API 入参都能引用它彻底消除类型漂移帧数换算时长200 帧 ÷ 30fps ≈ 6.67 秒。注册合成src/remotion/Root.tsx 是 Remotion 的组件注册表声明了示例中实际存在的两个合成Composition id{COMP_NAME} // MyComp component{Main} durationInFrames{DURATION_IN_FRAMES} // 200 fps{VIDEO_FPS} // 30 width{VIDEO_WIDTH} // 1280 height{VIDEO_HEIGHT} // 720 defaultProps{defaultMyCompProps} / Composition idNextLogo component{NextLogo} durationInFrames{300} fps{30} width{140} height{140} defaultProps{{ outProgress: 0 }} /示例合成组件位于 src/remotion/MyComp/Main.tsx、NextLogo.tsx、Rings.tsx、TextFade.tsx入口文件 src/remotion/index.ts 同时是deploy.mjs上传到 S3 的打包入口。若新增视频模板只需按同样模式写组件 → 在Root.tsx注册Composition→ 在types/constants.ts维护 props schema。本机渲染体验Studio 与 CLI在无需云端的场景下开发阶段可以直接在本机渲染npx remotion studio # 打开 Remotion Studio 图形界面 npx remotion render # 依据 remotion.config.ts 在本机渲染默认合成渲染行为由根目录的 remotion.config.ts 控制import { Config } from remotion/cli/config; import { webpackOverride } from ./src/remotion/webpack-override.mjs; Config.setRspack(true); // 启用 Rspack 作为打包器 Config.setVideoImageFormat(jpeg); // 视频帧编码使用 JPEG Config.overrideBundlerConfig(webpackOverride);setRspack(true)让 Remotion 使用基于 Rust 的 Rspack 打包器提高打包与预览速度overrideBundlerConfig(webpackOverride)把 Tailwind v4 的 PostCSS 处理接进 Remotion 的打包流程使Composition内也能使用 Tailwind 类实现见 webpack-override.mjs。需要指出的是该配置文件只对CLI / Studio生效。使用 Node.js API例如remotion/renderer或remotion/lambda时应把相应选项直接作为 API 参数传入。基于 AWS Lambda 的无服务器渲染链路这是模板价值最高的部分把渲染从开发机搬到 AWS。整条链路为——浏览器按钮 → Next.js API 路由 →renderMediaOnLambda提交渲染任务 → 轮询getRenderProgress→ 完成后返回可下载的视频 URL。第一步集中配置 Lambda 参数config.mjs 是唯一需要人工编辑的部署配置文件/** * Use autocomplete to get a list of available regions. * type {import(remotion/lambda).AwsRegion} */ export const REGION us-east-1; export const SITE_NAME my-next-app; export const RAM 3009; // Lambda 内存MB export const DISK 10240; // /tmp 磁盘MB export const TIMEOUT 240; // 超时秒各参数的语义与影响参数默认值说明REGIONus-east-1AWS 区域编辑器会提供AwsRegion类型补全SITE_NAMEmy-next-app部署到 S3 的站点名serveUrl也用于 API 引用RAM3009Lambda 函数内存直接影响并发渲染能力与费用DISK10240Lambda 临时磁盘/tmp上限MB复杂合成需更大空间TIMEOUT240单个 Lambda 渲染任务允许运行的最大秒数deploy.mjs与两个 API 路由均从该文件读取配置因此修改参数后必须重新部署README 明确要求。第二步填充 AWS 凭证按 README 步骤将.env.example本模板中真实存在复制为.env并填入你的 AWS 凭证参照 Remotion 官方的 Lambda setup 指南完成 AWS 侧初始化创建 IAM 用户、授予权限等获得AWS_ACCESS_KEY_ID与AWS_SECRET_ACCESS_KEY。从 deploy.mjs 的凭证检查逻辑可以看到它同时兼容两组环境变量命名方便你在既有 AWS SDK 命名与 Remotion 命名之间选择AWS_ACCESS_KEY_ID或REMOTION_AWS_ACCESS_KEY_IDAWS_SECRET_ACCESS_KEY或REMOTION_AWS_SECRET_ACCESS_KEY如果凭证缺失脚本不会直接失败而是打印提示并process.exit(0)退出说明Lambda 渲染未配置。第三步执行 deploy.mjsnode deploy.mjs脚本依次完成三件工作内部使用remotion/lambda的 APIdeployFunction部署/复用渲染函数createCloudWatchLogGroup: true便于在 CloudWatch 查日志内存、超时、磁盘均取自config.mjs返回functionName及是否已存在getOrCreateBucket在指定区域确保渲染用的 S3 Bucket 存在不存在则创建返回bucketNamedeploySite把 Remotion 合成入口src/remotion/index.ts打包并上传为站点options: { webpackOverride }保证 Tailwind 样式被正确打包。部署成功后终端会提示You now have everything you need to render videos!。README 同时强调在以下三种情况后都应重新运行node deploy.mjs修改了视频模板src/remotion/下的组件与合成修改了config.mjs中的参数把 Remotion 升级到了新版本。第四步两个 API 路由串联渲染与进度查询前端不直接持有 AWS 密钥而是通过 Next.js API 路由中转。前端封装见 src/lambda/api.tsrenderVideo()向/api/lambda/render发起 POSTgetProgress()向/api/lambda/progress发起 POST二者统一解析{ type: error }响应并抛错。触发渲染/src/app/api/lambda/render/route.ts 校验凭证后调用核心 APIconst result await renderMediaOnLambda({ codec: h264, functionName: speculateFunctionName({ diskSizeInMb: DISK, memorySizeInMb: RAM, timeoutInSeconds: TIMEOUT, }), region: REGION as AwsRegion, serveUrl: SITE_NAME, composition: body.id, inputProps: body.inputProps, framesPerLambda: 10, downloadBehavior: { type: download, fileName: video.mp4, }, });其中speculateFunctionName()依据config.mjs的三项参数推断出函数名——这正是改了 config 必须重跑 deploy的原因函数名由这些参数决定参数变化即意味着函数需要重新创建。framesPerLambda: 10表示每个 Lambda 实例负责渲染 10 帧控制单任务粒度与并发拆分downloadBehavior让产物以附件形式下载并命名为video.mp4。查询进度/src/app/api/lambda/progress/route.ts 调用getRenderProgress并把三态结果映射给前端遇fatalErrorEncountered→ 返回{ type: error, message: errors[0].message }渲染完成 → 返回{ type: done, url, size }进行中 → 返回{ type: progress, progress: Math.max(0.03, renderProgress.overallProgress) }0.03下限保证进度条起步可见。请求体与响应均以 types/schema.ts 中的 zod schema 为准RenderRequest、ProgressRequest与三态ProgressResponse两个路由通过src/helpers/api-response.ts暴露的executeApi包装器完成校验与统一响应格式。第五步前端的渲染状态机与轮询src/helpers/use-rendering.ts 实现了完整的渲染生命周期管理用一个判别联合类型描述状态init → invoking → rendering含 progress→ done | error核心流程为点击渲染后先置invoking并调用renderVideo拿到renderId与bucketName随后进入while (pending)轮询循环——每隔1 秒await wait(1000)调用一次getProgress根据返回的三态推进 UI出错时记录error完成时保存url与文件size并通过undo()一键回到初始态。配套的ProgressBar、RenderControls、DownloadButton等组件见src/components/把上述状态渲染为进度条、错误提示与下载按钮。部署到 Vercel 时的构建链由于vercel.json的存在本模板可被 Vercel 直接识别{ buildCommand: node deploy.mjs next build }也就是说Vercel 云端构建时会先执行 Lambda 部署脚本、再执行 Next.js 构建。要让它顺利通过必须在 Vercel 的项目环境变量中配置好 AWS 凭证即REMOTION_AWS_ACCESS_KEY_ID/REMOTION_AWS_SECRET_ACCESS_KEY。这保证了前端域名上线时渲染后端也总是处于已部署状态。常见误区与注意事项综合 README 与源码中的检查逻辑实践中有几条高频坑点需要规避改完config.mjs忘了重跑deploy.mjsspeculateFunctionName基于内存/磁盘/超时推断函数名deploySite上传的是旧站点渲染极可能报找不到函数/站点只在.env填了一组凭证却用了另一组命名deploy 与 render 路由分别兼容AWS_*与REMOTION_AWS_*两套变量名请保持一致在 Node.js API 中使用remotion.config.ts该文件只作用于 CLI/StudioLambda 渲染参数必须显式传入renderMediaOnLambda模板正是这么做的升级 Remotion 版本升级后应重跑node deploy.mjs否则云端函数与本地版本不匹配可能导致兼容性错误。进一步探索对照非 Tailwind 的 App Router 版本template-next-app对照 Pages Router 版本template-next-pages若想脱离模板理解底层可阅读 Remotion Lambda 的客户端 SDK 与类型定义packages/lambda、packages/lambda-client以及播放器内核 packages/player模板使用与许可证以仓库根目录 LICENSE.md 为准README 也提示部分实体公司可能需要购买商用许可。【免费下载链接】remotion Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotion创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考