To create a YouTube downloader in Next.js API, you can follow these steps:
- Create a new Next.js app by running the following command in your terminal:
npx create-next-app my-app
2. Create a new folder named api
in the root directory of your project.
3. Inside the api
folder, create a new file named download.js
. This file will handle the YouTube video download requests.
4. Open the download.js
file and add the following code:
import ytdl from "ytdl-core";
export default async (req, res) => {
const videoId = req.query.id;
const videoUrl = `https://www.youtube.com/watch?v=${videoId}`;
const info = await ytdl.getInfo(videoUrl);
const format = ytdl.chooseFormat(info.formats, { quality: "highest" });
res.setHeader("Content-Disposition", `attachment; filename="${info.videoDetails.title}.mp4"`);
ytdl(videoUrl, { format }).pipe(res);
};
This code imports the ytdl-core
package to handle the video download requests. When a request is made to this API endpoint with a videoId
query parameter, it gets the video information and downloads the video with the highest quality format available.
5. Open the pages/index.js
file and add the following code:
import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
import { useState } from "react";
export default function Home() {
const [videoId, setVideoId] = useState("");
const [formats, setFormats] = useState([]);
const handleDownload = async () => {
const res = await fetch(`/api/download?id=${videoId}`);
const formats = await res.json();
setFormats(formats);
};
return (
<div className={styles.container}>
<Head>
<title>YouTube App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<div>
<input
type="text"
placeholder="Enter YouTube video ID"
value={videoId}
className={styles.input}
onChange={(e) => setVideoId(e.target.value)}
/>
<button className={styles.button} onClick={handleDownload}>Download</button>
</div>
<h1 className={styles.title}>
YouTube Video <a href="https://nextjs.org">Downloader</a>
</h1>
<p className={styles.description}>
{/* Get started by editing{' '} */}
{/* <code className={styles.code}>pages/index.js</code> */}
</p>
<div className={styles.grid}>
{formats.map((format, index) => (
<a key={index} href={format.url} className={styles.card}>
<h2>{format.qualityLabel} →</h2>
</a>
))}
{/* <a href="https://nextjs.org/learn" className={styles.card}>
<h2>Learn →</h2>
<p>Learn about Next.js in an interactive course with quizzes!</p>
</a> */}
{/* <a
href="https://github.com/vercel/next.js/tree/canary/examples"
className={styles.card}
>
<h2>Examples →</h2>
<p>Discover and deploy boilerplate example Next.js projects.</p>
</a> */}
{/* <a
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
className={styles.card}
>
<h2>Deploy →</h2>
<p>
Instantly deploy your Next.js site to a public URL with Vercel.
</p>
</a> */}
</div>
</main>
<footer className={styles.footer}>
<a
href="https://bluehost.sjv.io/c/415205/1465841/11352"
target="_blank"
rel="noopener noreferrer"
>
Powered by{' '}
<span className={styles.logo}>
<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
</span>
</a>
</footer>
</div>
)
}
This code creates a form with an input field to enter the YouTube video ID and a download button. When the download button is clicked, it redirects the user to the /download/:id
route with the video ID as a parameter.
Now run this command in terminal
npm run dev
open this url : http://localhost:3000/