DEV Community

vimex vamos
vimex vamos

Posted on Originally published at boreels.com

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

#nextjs #seo #webdev #react

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" />
Enter fullscreen mode Exit fullscreen mode

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

  1. ISR cache is tricky — Next.js prerenders pages with s-maxage=31536000. Use force-dynamic carefully.
  2. Docker build cache — Always use --no-cache when deploying changes.
  3. Hreflang works — 10 countries in 8 days proves multilingual SEO from day 1 is worth it.
  4. 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.

Top comments (0)