This is a Next.js template for building programmatic video apps with @remotion/player and rendering via Vercel Sandbox.

This template uses the Next.js App directory with TailwindCSS. Videos are rendered in a Vercel Sandbox environment and stored in Vercel Blob storage.

Getting Started

Use this template to clone it into your GitHub account. Run

npm i

afterwards. Alternatively, use this command to scaffold a project:

npx create-video@latest --vercel

Commands

Start the Next.js dev server:

npm run dev

Open the Remotion Studio:

npx remotion studio

Render a video locally:

npx remotion render

Upgrade Remotion:

npx remotion upgrade

Deploy to Vercel

The only requirement is to set up a Vercel Blob store and attach it to your project.
It is advisable to first deploy the template to Vercel so you have a project to attach the Blob store to.

1. Go to your Vercel dashboard
2. Navigate to Storage > Create > Blob
3. Create a new Blob store and attach it to your project

If you deploy your app to the same Vercel project where your Blob store is attached, the BLOB_READ_WRITE_TOKEN environment variable is automatically available.

Local Development

To get access to sandboxes, just make sure you are logged in with the Vercel CLI:

vercel login

To run renders locally, pull the BLOB_READ_WRITE_TOKEN environment variable from your attached Blob store:

vercel link  # Link to your Vercel project (if not already linked)
vercel env pull .env.local

This pulls BLOB_READ_WRITE_TOKEN from your attached Blob store.

Then start the dev server:

npm run dev

Docs

Read more about this template here.

Help

We provide help on our Discord server.

Issues

Found an issue with Remotion? File an issue here.

License

Note that for some entities a company license is needed. Read the terms here.