Remotion-Template-NextJS

Remotion-Template-NextJS copied to clipboard

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