Building a Simple Instagram Video Downloader with Next.js

Building a Simple Instagram Video Downloader with Next.js

I recently built a small project called InstaFetch, a simple web application for processing Instagram video and Reel URLs.

The main goal was to keep the interface extremely simple: paste a URL, process it on the server, and return the media to the user.

The project is built with Next.js, which makes it convenient to handle both the frontend and server-side API logic in the same application.

Basic architecture

The flow is roughly:

User
↓
Next.js frontend
↓
API route
↓
Process the requested URL
↓
Return the media response
↓
Browser download

One thing I found interesting was handling the response correctly. Instead of treating every response as JSON, the server needs to consider things such as:

HTTP status codes
redirects
content type
binary responses
failed requests
large response sizes

For example, a simplified server-side request can look like:

const response = await fetch(url, {
redirect: "follow"
});

if (!response.ok) {
throw new Error(Request failed: ${response.status});
}

const contentType = response.headers.get("content-type");

From there, the response can be handled according to its content type instead of assuming that every request returns JSON.

Why I chose Next.js

Next.js was useful for this project because I didn't need to maintain a completely separate frontend and backend application.

The UI can remain simple while the server-side logic is handled through Next.js route handlers.

This also makes it easier to deploy the entire application as one project.

The result

The project is now live at InstaFetch.app.

The main lesson for me was that a seemingly simple downloader involves more backend considerations than I initially expected, particularly around HTTP responses, streaming, validation, and error handling.

I'm interested in how other developers approach streaming large remote files through Next.js without unnecessarily loading the entire response into memory.