YouTube Transcript API for Next.js

// app/api/transcript/route.ts
import { NextRequest, NextResponse } from "next/server";

export async function GET(req: NextRequest) {
  const url = req.nextUrl.searchParams.get("url");

  if (!url) {
    return NextResponse.json({ error: "URL is required" }, { status: 400 });
  }

  const res = await fetch(
    `https://api.youtubetranscripts.co/v1/transcript?url=${encodeURIComponent(url)}`,
    {
      headers: { "x-api-key": process.env.YT_TRANSCRIPTS_API_KEY! },
      next: { revalidate: 3600 }, // Cache for 1 hour
    }
  );

  const data = await res.json();
  return NextResponse.json(data);
}

// app/transcript/[videoId]/page.tsx — Server Component
export default async function TranscriptPage({
  params,
}: {
  params: { videoId: string };
}) {
  const res = await fetch(
    `https://api.youtubetranscripts.co/v1/transcript?url=https://youtube.com/watch?v=${params.videoId}`,
    {
      headers: { "x-api-key": process.env.YT_TRANSCRIPTS_API_KEY! },
      next: { revalidate: 86400 },
    }
  );
  const data = await res.json();

  return (
    <main>
      <h1>{data.title}</h1>
      <p>By {data.channel}</p>
      <div>
        {data.transcript.map((seg: any, i: number) => (
          <p key={i}>
            <span>{seg.start.toFixed(1)}s</span> {seg.text}
          </p>
        ))}
      </div>
    </main>
  );
}