I Built a YouTube Dislike Viewer with Next.js 16 — Here's How

Source: Dev.to

Ever since YouTube removed the public dislike count, it’s been harder to judge video quality at a glance. I built a simple viewer that restores that information.

Live Site

https://www.youtubedislikeviewer.shop

What It Does

Paste any YouTube URL or video ID, and instantly see:

• 👍 Likes & 👎 Dislikes
• 📊 Like/Dislike ratio bar
• 👁 View count & rating
• 🕐 Search history (stored locally)

Tech Stack

• Next.js 16 (App Router + Turbopack)
• React 19 + TypeScript 5.9
• Tailwind CSS 4
• Return YouTube Dislike API (community‑driven dislike data)

Key Design Decisions

API Proxy with Caching

Instead of calling the dislike API directly from the client, a server‑side proxy route is used at /api/dislike. This allows caching headers to be added and keeps the API key hidden.

// app/api/dislike/route.ts (simplified)
export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const videoId = searchParams.get('videoId');
  const apiUrl = `https://returnyoutubedislikeapi.com/votes?videoId=${videoId}`;

  const response = await fetch(apiUrl, {
    headers: { 'Cache-Control': 'public, max-age=3600' },
  });
  return new Response(await response.text(), {
    status: response.status,
    headers: { 'Content-Type': 'application/json' },
  });
}

Robust URL Parsing

YouTube URLs appear in many forms (youtube.com/watch?v=, youtu.be/, /embed/, or a raw 11‑character ID). A single parsing utility normalizes all inputs to the video ID.

Thumbnail Fallback

Not every video provides a maxresdefault thumbnail. The component attempts the highest‑quality thumbnail first and gracefully falls back to lower‑resolution versions if needed.

What I Learned

• Next.js 16 App Router feels mature and natural once you get used to the server/client component split.
• Simple Cache‑Control headers provide effective edge caching—no Redis required for a project of this size.
• localStorage remains a perfectly fine solution for lightweight client‑side persistence such as search history.

Try It Out

Check it out at https://www.youtubedislikeviewer.shop and let me know what you think!