just-moh-it / remotion-template-nextjs

(WIP) A secure & opinionated NextJS template for Remotion v4

Remotion Template NextJS

🦄 A Fully-Featured Remotion+Next.JS Starter Template

Demo · Fork this template

📦 Features

• ⚡️ NextJS 13 - Uses all the bleeding-edge features of NextJS 13
  • 🌈 Server Actions - APIs are abstracted, invoke and poll renders with typesafety
  • 📁 App Directory - Create layouts and new pages delightfully
• 🎨 TailwindCSS - Uses TailwindCSS for styling app and videos
• ƛ Remotion Lambda - Uses Remotion Lambda for rendering videos at scale
• 📱 Supports Multiple Video Dimensions - Change the aspect ratio of your videos using the app
• 📦 Fully-Featured - Uses all the features of Remotion
• 📝 TypeScript+Validation - Uses TypeScript for type safety and Zod for validation

🚀 Quickstart

1. Generate a repo using this template

Click on the Use this template button on the top of the page to create a new repo using this template.

2. Install dependencies

pnpm add

3. Create .env file

Copy the .env.example file to .env and fill in the values.

REMOTION_AWS_ACCESS_KEY_ID=<Your AWS Access Key ID>
REMOTION_AWS_SECRET_ACCESS_KEY=<Your AWS Secret Access Key>

4. Deploy lambda

pnpm run lambda:site
pnpm run lambda:function

5. Start the app

pnpm run dev

This will start the app on http://localhost:3000.

🤙🏼 Reach out

Having trouble? Unsure of something? Feel free to ask away in the discussions.

🌄 Inspiration

• Kmenu - Readme Template
• Remotion's NextJS Template

remotion-template-nextjs's Issues

Setup preview for compositions, let each comp export defaultProps

Maybe: Final renders don't show blank screen

When compositions are rendered, the inputProps are sent to lambda but the text doesn't show up in the video, even though the durationInFrames is calculated properly.

(reported by @YannisHaismann via twitter)

Use `pollProgress` from configuration

Currently, it just spams the progress endpoint. Instead, we want to wait for at least pollProgress seconds before resending progress poll request

Migrate to Remotion v4

The title says it all 🙃

Add minimal UI

Currently it looks like shit ngl 🙃

Clean up (currently nasty) zod input props parsing, remove parsing libs if necessary

Upgrade nextjs & other deps to their latest version

Add docs for comparison with official nextjs template

Allow final rendered video to be downloaded 🎥

Discussed in #8

^{Originally posted by HamedMP July 20, 2023}
Hi!

Thanks for the template, life saver!

Have all the good stuff together, everything from Next to Lambda! 🎉

One idea: I'm just playing with the editor. After pressing Render, and finishing, I didn't see any URL to the final output.

Checked the useRender hook but it returns only the start function and the status. How one can get the URL of the final video?

Add github actions auto-deployments and site updates

Waiting for status on https://discord.com/channels/809501355504959528/817306414069710848/1125718820506570812