For Next.js
Next.js video hosting and galleries, without a CMS.
Keep video files out of /public and photo folders out of the repo. Dropl hosts the media, you drop a small component into the page, and the client updates it without a redeploy.
import Script from "next/script";
export function DroplShowcase({ id }: { id: string }) {
return (
<>
<div data-dropl-showcase={id} />
<Script src="https://www.dropl.io/embed/showcase.js" />
</>
);
}
export function DroplVideo({ id }: { id: string }) {
return (
<>
<div data-dropl-video={id} />
<Script src="https://www.dropl.io/embed/player.js" />
</>
);
}The usual way
Media is the part of a Next.js site that keeps changing.
The code ships once. The photos and videos don't stop coming.
Video in /public eats bandwidth
A plain MP4 in /public has no adaptive quality and no player, and every view counts against your host's data transfer.
A gallery means a CMS or a redeploy
Wiring up a headless CMS for one gallery is a lot of setup. Committing photos to the repo means a pull request every time the client sends new ones.
Third-party embeds fight the router
Scripts that only scan the page once miss content that arrives on client-side navigation, so the gallery shows on a hard refresh and nowhere else.
What you get
Video hosting and gallery embeds that work today.
No SDK to install. A div, a script, and the media lives in Dropl.
Video hosting with a real player
Adaptive streaming, an ad-free player you can match to the brand, custom thumbnails, and public, unlisted, private, or password-protected videos.
Galleries with photos and video
Grid or collage layouts, category filter tabs, and a lightbox. The Projects layout adds a portfolio with a page for each project.
Built for client-side navigation
The embed scripts watch the page, so containers that appear after a route change mount on their own and ones that leave are cleaned up.
Careful with Core Web Vitals
The player reserves its space and downloads no video until play. Photos are resized for each screen and lazy loaded, and tiles keep their shape while they load.
Clients update it without a deploy
Invite the client to a portal that shows only their site. They upload from their phone and the page updates. No pull request, no rebuild.
A REST API when you need it
A versioned API with scoped keys and an OpenAPI document. Create showcases, upload media, and read showcase details from your server.
Setup
Add Dropl to a Next.js site.
The same component works in Server Components, static exports, and the Pages Router.
- 1
Upload the media
Upload videos to the client's site in Dropl and create a showcase for the photos and videos you want together.
- 2
Add the component
Wrap the embed in a small component that loads the script with next/script. Next.js loads each script once, however many embeds the page has.
- 3
Use it in any page
Pass the ID from Copy embed code in Dropl. The embed renders in the browser, so the page itself can stay static.
- 4
Lock embeds to your domains
Optionally turn on embed protection with the production domain and exact preview URLs, and allow localhost while you build.
The API at https://www.dropl.io/api/v1 is for server-side use only: it doesn't allow browser calls, so keep the key in a server environment variable, never one prefixed with NEXT_PUBLIC_. The embeds themselves need no key.
import Script from "next/script";
export function DroplShowcase({ id }: { id: string }) {
return (
<>
<div data-dropl-showcase={id} />
<Script src="https://www.dropl.io/embed/showcase.js" />
</>
);
}
export function DroplVideo({ id }: { id: string }) {
return (
<>
<div data-dropl-video={id} />
<Script src="https://www.dropl.io/embed/player.js" />
</>
);
}import { DroplShowcase, DroplVideo } from "@/components/dropl";
export default function WorkPage() {
return (
<main>
<h1>Our work</h1>
<DroplVideo id="YOUR_VIDEO_ID" />
<DroplShowcase id="YOUR_SHOWCASE_ID" />
</main>
);
}FAQ
Frequently asked questions
Should I put videos in /public or host them on Vercel?
You can, but it gets expensive and plain. Files in /public are served as-is, with no adaptive quality and no player, and on Vercel every view counts as Fast Data Transfer, which the Hobby plan includes only up to 100 GB. Vercel Blob stores the file but you still bring your own player, and Vercel's own guide suggests dedicated video platforms for compressing and transforming video. Dropl gives you adaptive streaming and a player, with delivery included in the plan.
Does it work with the App Router and client-side navigation?
Yes. Load the embed script with next/script in a Server or Client Component. The script watches the page for new embed containers, so a gallery or video that appears after a client-side route change mounts by itself, and embeds that leave the page are cleaned up.
Will the embeds hurt Core Web Vitals?
They're built not to. next/script loads the script after hydration by default, so it doesn't block your page. The video player reserves its space and downloads no video until someone presses play. Showcase photos come in sizes for each screen, lazy load, and keep their tile shape while loading.
Can I fetch gallery data with an API?
Yes, from your server. The versioned REST API can list a site's showcases and videos, get a showcase with its categories and items, list a Projects showcase's projects and slugs, and return embed codes. It uses scoped API keys, publishes an OpenAPI document, and doesn't accept calls from the browser.
Will embeds work on preview deployments and localhost?
Yes. Embeds work on any website until you turn on embed protection. With protection on, add each preview's exact address and turn on Allow localhost for testing. Wildcards on shared hosts like *.vercel.app are refused, so other people's sites can't use your media.
How much does Dropl cost?
$15/month flat for unlimited client sites and team members, with 100 GB storage and 500 GB monthly delivery, pooled across every client site. Need more? Add capacity packs: +100 GB storage and +500 GB delivery for $10/month per capacity pack. Your bill only changes when you change it. It starts with a 14-day free trial, no credit card required.
Keep reading
More guides and comparisons
- Webflow video hostingAd-free video and galleries with photos and video for Webflow. Paste one Code Embed, let clients upload from their phone, and skip reopening the Designer.
- Framer video and galleriesAdaptive, ad-free video and photo galleries for Framer sites. Paste one Embed, build portfolios with a page per project, and let clients add their own media.
- WordPress gallery without a pluginAdd a photo and video gallery to WordPress with a Custom HTML block. No plugin, no media library bloat, and clients can update it from their phone.
- Vimeo alternativeA Vimeo alternative for web designers and agencies: one flat plan, unlimited client sites and team members, an ad-free branded player, and photo showcases.
- Wistia alternativeA flat-priced Wistia alternative for agencies: unlimited videos, client sites, and team members on one plan, with an ad-free player and no per-user fees.
- Elfsight alternativeHosted photo and video galleries for client websites. One flat plan for unlimited sites, no per-widget view caps, and clients update media themselves.
Stop redeploying to swap a video.
Host the media in Dropl, drop the component into your Next.js pages, and let your client keep it current.