Skip to content

Just-Moh-it/Remotion-Template-NextJS

Repository files navigation

Remotion NextJS Template Graphic

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