"use client";import { useSearchParams } from "next/navigation";function VideoCreado() { const searchParmas = useSearchParams(); const link = searchParmas.get("link"); return (<div className="bg-gray-900 text-gray-100 min-h-screen flex flex-col items-center justify-center"><h1 className="text-3xl font-bold mb-4">video created!</h1><p className="text-lg">transcript:</p><p>{link}</p></div> );}export default VideoCreado;how can I use youtube API in next.js such that I can fetch the transcription of the youtube video with link = {link}?
I know how to do this in python but not in tsx:
from youtube_transcript_api import YouTubeTranscriptApidef get_transcription(video_url): # Extract the video ID from the URL video_id = video_url.split("v=")[1] ampersand_position = video_id.find("&") if ampersand_position != -1: video_id = video_id[:ampersand_position] # Get the transcript transcript = YouTubeTranscriptApi.get_transcript(video_id) # Combine the transcription into a single string transcription = ''.join([entry['text'] for entry in transcript]) return transcription# Example usagevideo_url = "https://www.youtube.com/watch?v=8yZ-x-WuFw0&ab_channel=NamePointer"transcription = get_transcription(video_url)print(transcription)