Next.js 16으로 YouTube Dislike Viewer를 만들었습니다 — 방법은 이렇습니다

Source: Dev.to

YouTube가 공개된 싫어요 수를 제거한 이후로, 한눈에 영상 품질을 판단하기가 어려워졌습니다. 저는 그 정보를 복원하는 간단한 뷰어를 만들었습니다.

Live Site

https://www.youtubedislikeviewer.shop

What It Does

YouTube URL이나 영상 ID를 붙여넣기만 하면 즉시 확인할 수 있습니다:

• 👍 좋아요 & 👎 싫어요
• 📊 좋아요/싫어요 비율 바
• 👁 조회수 & 평점
• 🕐 검색 기록 (로컬에 저장)

Tech Stack

• Next.js 16 (App Router + Turbopack)
• React 19 + TypeScript 5.9
• Tailwind CSS 4
• Return YouTube Dislike API (커뮤니티 기반 싫어요 데이터)

Key Design Decisions

API Proxy with Caching

클라이언트에서 직접 싫어요 API를 호출하는 대신, /api/dislike 라는 서버‑사이드 프록시 라우트를 사용합니다. 이를 통해 캐시 헤더를 추가하고 API 키를 숨길 수 있습니다.

// 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 URL은 다양한 형태(youtube.com/watch?v=, youtu.be/, /embed/, 혹은 순수 11자리 ID)로 나타납니다. 하나의 파싱 유틸리티가 모든 입력을 영상 ID로 정규화합니다.

Thumbnail Fallback

모든 영상이 maxresdefault 썸네일을 제공하는 것은 아닙니다. 컴포넌트는 가장 고해상도 썸네일을 먼저 시도하고, 필요시 낮은 해상도 버전으로 부드럽게 대체합니다.

What I Learned

• Next.js 16 App Router는 서버/클라이언트 컴포넌트 구분에 익숙해지면 성숙하고 자연스럽게 느껴집니다.
• 간단한 Cache‑Control 헤더만으로도 효과적인 엣지 캐싱을 구현할 수 있어, 이 규모의 프로젝트에 Redis가 필요하지 않습니다.
• localStorage는 검색 기록 같은 가벼운 클라이언트‑사이드 영속성을 위한 완벽한 솔루션입니다.

Try It Out

https://www.youtubedislikeviewer.shop에서 직접 확인해 보시고, 의견을 알려 주세요!