Building BoReels: A Drama Discovery Platform with Next.js 16

vimex vamos — Tue, 08 Sep 2026 11:36:04 +0000

Building a drama discovery platform that serves 700+ short dramas across 12 languages is no small feat. Here's how I built BoReels using Next.js 16, TypeScript, and Tailwind CSS.

The Problem

Short drama platforms like ReelShort and DramaBox are exploding globally — a $3 billion market growing 115% year-over-year. But there's no discovery layer. Users have to download each app separately, browse through hundreds of titles, and hope they find something good.

BoReels solves this by aggregating dramas from 5+ platforms into a single discovery interface with free previews, unique synopses, and a Mood Match feature.

Tech Stack

Next.js 16 with App Router and Turbopack
TypeScript for type safety
Tailwind CSS for styling
Docker for deployment (standalone output)
nginx reverse proxy on aaPanel VPS

Key Features

1. Mood Match — Emotion-Based Recommendations

The standout feature. Users select from 8 moods and get drama recommendations matching their emotional state.

2. Hreflang for 12 Languages

<link rel="alternate" hrefLang="id" href="https://boreels.com/" />
<link rel="alternate" hrefLang="en" href="https://boreels.com/?lang=en" />

This resulted in visitors from 10 countries within 8 days of launch.

3. Lazy Load for Performance

Initially, all 700+ dramas were bundled into the client — 199KB HTML. By splitting into initial bundle (30 dramas) + API fetch (remaining), page size dropped to 133KB — a 33% reduction.

4. Schema Markup (JSON-LD)

4+ structured data blocks: WebSite, Organization, FAQPage, BreadcrumbList. Google detected 59 breadcrumbs within the first week.

SEO Results (8 Days)

118 clicks from Google
1,160 impressions
10.6% CTR (3x industry average)
Position 7.9 (Page 1!)
10 countries: Indonesia, Philippines, India, Kenya, USA, Malaysia, Saudi Arabia, Bangladesh, Singapore, UAE

Backlink Strategy

White hat only:

Blogger (DA 99) — auto-post 3x/day via API
WordPress self-hosted (DA 92) — auto-post 3x/day via REST API
Tumblr (DA 86) — auto-post 3x/day via OAuth
Medium (DA 96) — manual
Wattpad (DA 90+) — manual

Total: ~27-45 backlinks/day, natural anchor text rotation across 5 categories.

Lessons Learned

ISR cache is tricky — Next.js prerenders pages with s-maxage=31536000. Use force-dynamic carefully.
Docker build cache — Always use --no-cache when deploying changes.
Hreflang works — 10 countries in 8 days proves multilingual SEO from day 1 is worth it.
Long-tail > head keywords — 77% of clicks came from one drama title. Each of 700+ dramas is a unique keyword.

What's Next

Programmatic landing pages (100+ keyword targets)
Core Web Vitals optimization (target <100KB)
Guest post outreach to entertainment blogs

Check it out at BoReels or try the Mood Match feature!

Built with Next.js 16, TypeScript, Tailwind CSS, Docker, and a lot of late nights.

DEV Community: vimex vamos