Display YouTube Transcripts in Next.js with Server Components

npx create-next-app@latest transcript-viewer --typescript --tailwind --app
cd transcript-viewer

# Add to .env.local
echo "YT_TRANSCRIPTS_API_KEY=your_key_here" >> .env.local

// lib/transcripts.ts
export interface TranscriptSegment {
  text: string;
  start: number;
  duration: number;
}

export interface TranscriptData {
  title: string;
  channel: string;
  duration: number;
  transcript: TranscriptSegment[];
}

export async function getTranscript(videoUrl: string): Promise<TranscriptData> {
  const res = await fetch(
    `https://api.youtubetranscripts.co/v1/transcript?url=${encodeURIComponent(videoUrl)}`,
    {
      headers: { "x-api-key": process.env.YT_TRANSCRIPTS_API_KEY! },
      next: { revalidate: 86400 },
    }
  );

  if (!res.ok) {
    throw new Error(`Failed to fetch transcript: ${res.status}`);
  }

  return res.json();
}

// app/transcript/[videoId]/page.tsx
import { getTranscript } from "@/lib/transcripts";

export default async function TranscriptPage({
  params,
}: {
  params: { videoId: string };
}) {
  const data = await getTranscript(
    `https://youtube.com/watch?v=${params.videoId}`
  );

  return (
    <main className="mx-auto max-w-3xl px-4 py-12">
      <h1 className="text-3xl font-bold">{data.title}</h1>
      <p className="mt-2 text-gray-500">
        {data.channel} &middot; {Math.round(data.duration / 60)} min
      </p>

      <div className="mt-8 space-y-2">
        {data.transcript.map((seg, i) => (
          <div key={i} className="flex gap-4">
            <a
              href={`https://youtube.com/watch?v=${params.videoId}&t=${Math.floor(seg.start)}`}
              className="shrink-0 text-sm text-blue-500 hover:underline"
              target="_blank"
            >
              {formatTime(seg.start)}
            </a>
            <p>{seg.text}</p>
          </div>
        ))}
      </div>
    </main>
  );
}

function formatTime(seconds: number): string {
  const m = Math.floor(seconds / 60);
  const s = Math.floor(seconds % 60);
  return `${m}:${s.toString().padStart(2, "0")}`;
}

// Add to app/transcript/[videoId]/page.tsx
import type { Metadata } from "next";
import { getTranscript } from "@/lib/transcripts";

export async function generateMetadata({
  params,
}: {
  params: { videoId: string };
}): Promise<Metadata> {
  const data = await getTranscript(
    `https://youtube.com/watch?v=${params.videoId}`
  );

  return {
    title: `${data.title} - Transcript`,
    description: `Read the full transcript of "${data.title}" by ${data.channel}. ${data.transcript.length} segments, ${Math.round(data.duration / 60)} minutes.`,
  };
}

// app/page.tsx
"use client";
import { useState } from "react";
import { useRouter } from "next/navigation";

export default function Home() {
  const [url, setUrl] = useState("");
  const router = useRouter();

  function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    const match = url.match(/[?&]v=([a-zA-Z0-9_-]{11})/);
    if (match) {
      router.push(`/transcript/${match[1]}`);
    }
  }

  return (
    <main className="flex min-h-screen items-center justify-center">
      <form onSubmit={handleSubmit} className="flex gap-2">
        <input
          value={url}
          onChange={(e) => setUrl(e.target.value)}
          placeholder="Paste YouTube URL..."
          className="w-96 rounded border px-4 py-2"
        />
        <button className="rounded bg-blue-600 px-6 py-2 text-white">
          Get Transcript
        </button>
      </form>
    </main>
  );
}