我用 Next.js 16 构建了一个 YouTube Dislike Viewer — 操作方法

Source: Dev.to

自从 YouTube 移除公开的点踩计数后，单凭一眼判断视频质量变得更困难了。我做了一个简易的查看器，恢复了这项信息。

实时站点

https://www.youtubedislikeviewer.shop

功能说明

粘贴任意 YouTube URL 或视频 ID，即可立即看到：

• 👍 点赞 & 👎 点踩
• 📊 点赞/点踩比例条
• 👁 播放次数 & 评分
• 🕐 搜索历史（本地存储）

技术栈

• Next.js 16（App Router + Turbopack）
• React 19 + TypeScript 5.9
• Tailwind CSS 4
• Return YouTube Dislike API（社区驱动的点踩数据）

关键设计决策

带缓存的 API 代理

不直接在客户端调用点踩 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' },
  });
}

强大的 URL 解析

YouTube 链接形式多样（youtube.com/watch?v=、youtu.be/、/embed/，或直接的 11 位 ID）。我们编写了统一的解析工具，将所有输入标准化为视频 ID。

缩略图回退

并非每个视频都有 maxresdefault 缩略图。组件会先尝试最高质量的缩略图，如不可用则优雅地回退到低分辨率版本。

我的收获

• Next.js 16 App Router 在熟悉了服务器/客户端组件的划分后，感觉非常成熟自然。
• 简单的 Cache‑Control 响应头即可实现有效的边缘缓存——不需要为这样的小项目额外部署 Redis。
• localStorage 仍然是轻量级客户端持久化（如搜索历史）的完美方案。

试一试

访问 https://www.youtubedislikeviewer.shop 体验一下，并告诉我你的感受！