What is the process for redirecting an API response to Next.js 13?

Question

What is the process for redirecting an API response to Next.js 13?

Previously, I successfully piped the response of another API call to a Next.js API response like this:

export default async function (req, res) {
    // prevent same site/ obfuscate original API
    // some logic here 
    fetch(req.body.url).then(r => {
      r.body.pipe(res);
    }).catch(err => {
      console.log(err);
      res.status(500).send("Invalid Url");
    })
}

It worked flawlessly. However, now the response.body returned by the fetch API no longer has the pipe method. Instead, it offers pipeTo and pipeThrough methods. Unfortunately, the Next.js res:NextApiResponse cannot be assigned to a WritableStream.

I attempted creating a blob (await r.blob()) and using res.send(blob) and res.send(blob.strem()). Initially, it seemed to work but the data received by the frontend turned out to be incorrect (Essentially,

fetch().then((res) => res.blob()).then((blob) => URL.createObjectURL(blob)))

resulted in corrupted data).

javascript typescript next.js fetch-api next.js13

Answer 1

Answer №1

In the realm of web development, an experimental API called Readable.fromWeb() has emerged. This API has the ability to convert a fetch() call into a ReadableStream, transforming it into a nodejs stream seamlessly. As reported, this functionality appears to be operational in node version 18.14.0.

import { Readable } from 'node:stream';

export default async function (req, res) {
    // To ensure data security and privacy
    // Additional logic here 
    fetch(req.body.url).then(r => {
      Readable.fromWeb(r.body).pipe(res);
    }).catch(err => {
      console.log(err);
      res.status(500).send("Invalid Url");
    })
}

Answer 2

In the realm of web development, an experimental API called Readable.fromWeb() has emerged. This API has the ability to convert a fetch() call into a ReadableStream, transforming it into a nodejs stream seamlessly. As reported, this functionality appears to be operational in node version 18.14.0.

import { Readable } from 'node:stream';

export default async function (req, res) {
    // To ensure data security and privacy
    // Additional logic here 
    fetch(req.body.url).then(r => {
      Readable.fromWeb(r.body).pipe(res);
    }).catch(err => {
      console.log(err);
      res.status(500).send("Invalid Url");
    })
}

Answer 3

Answer №2

Here is a fantastic solution that worked wonders!

const https = require("https");

export default async function handler(req, res) {
   try {
      const url = `your-url`;
      res.status(200);
      https.get(url, (response) => {
        response.pipe(res);
        response.on("finish", res.end);
      });
    } catch (err) {
      console.log(err);
      res.status(500).send("Invalid Url");
    }
}

Update

The above method is effective in simple scenarios but fails when there are redirects.

Klesum recommends using the Readable API for better results.

import { Readable } from "node:stream";

export default async function (req, res) {
    fetch(req.body.url).then(r => {
      Readable.fromWeb(r.body).pipe(res);
    })
}

TypeScript may show warnings for this specific line, but you can simply ignore them with // @ts-ignore and everything will work smoothly.

Answer 4

Here is a fantastic solution that worked wonders!

const https = require("https");

export default async function handler(req, res) {
   try {
      const url = `your-url`;
      res.status(200);
      https.get(url, (response) => {
        response.pipe(res);
        response.on("finish", res.end);
      });
    } catch (err) {
      console.log(err);
      res.status(500).send("Invalid Url");
    }
}

Update

The above method is effective in simple scenarios but fails when there are redirects.

Klesum recommends using the Readable API for better results.

import { Readable } from "node:stream";

export default async function (req, res) {
    fetch(req.body.url).then(r => {
      Readable.fromWeb(r.body).pipe(res);
    })
}

TypeScript may show warnings for this specific line, but you can simply ignore them with // @ts-ignore and everything will work smoothly.

What is the process for redirecting an API response to Next.js 13?

Answer №1

Answer №2

Update

Similar questions

Do you need assistance with downloading files and disconnecting from clients?

The React functional component captures a snapshot of its state when initializing a websocket event handler

Trouble parsing JSON in Classic ASP

"Master the art of using express and jade to loop through data and generate dynamic

Creating both Uniform and Varying drawings on a single webGL canvas

React hook triggering re-render

There is a possibility of encountering an endless update loop in the watcher when utilizing the expression "tabs" error in vue

Typescript's way of mocking fetch for testing purposes

The Owl carousel's autoplay feature seems to be set at a fixed speed of 5

Displaying a subset of categories based on the user's selection

The function get_template_directory_uri() returned an unexpected string error

Capture a screenshot with Puppeteer at a random URL stop

The request body doesn't meet the interface requirements, but it does not trigger an error response

Discover an Effective Approach for Transmitting Form-Data as a JSON Object

Utilizing Firebase 3 with Ionic 2 and cordova-plugin-camera for seamless file uploading

how can JavaScript be used to retrieve an object based on a condition from an array of objects and an ArrayList

Combine a pair of select statements to utilize the RxJS store within an Angular Guard

Using Javascript and JQuery to create an alert that pops up upon loading the page is not effective

Tips on using the .map() method to extract data from a JSON response received from a get request and utilizing the content within a specific index to populate table rows

Steps to display text in a div upon clicking on an image