javascript - Decode ReadableStream object nextjs 13 api route - Stack Overflow

admin管理员组

文章数量:1178594

I'm sending a value to my server side code that isn't being read correctly. I'm using the NextJS experimental App directory

//src/app/api/auth/route.js

export async function POST(req, res) {
  console.log(req.body);
  const { address } = req.body;
  const isAuthenticated = await checkBalance(address, threshold);
  if (isAuthenticated) {
    return new Response("Authorized", { status: 200 });
  } else if (isAuthenticated == false) {
    return new Response("Unauthorized", { status: 401 });
  } else if (isAuthenticated == undefined) {
    return new Response("Error", { status: 500 });
  }
}

console log is: ReadableStream { locked: false, state: 'readable', supportsBYOB: false }

const address is undefined.

This is the api call:

const response = await fetch("/api/auth", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({ address: walletAddress }),
        });
        const data = await response.json();

I read in another answer to a similar question that nextjs12+ is supposed to parse the request automatically- what am I doing wrong? I'm assuming that nextjs has a protocol in place for decoding the ReadableStream but I can't find anything in the docs or examples for this, maybe because there is a framework agnostic method for decoding the object that is unknown to me?

Thank you in advance.

I'm sending a value to my server side code that isn't being read correctly. I'm using the NextJS experimental App directory

//src/app/api/auth/route.js

export async function POST(req, res) {
  console.log(req.body);
  const { address } = req.body;
  const isAuthenticated = await checkBalance(address, threshold);
  if (isAuthenticated) {
    return new Response("Authorized", { status: 200 });
  } else if (isAuthenticated == false) {
    return new Response("Unauthorized", { status: 401 });
  } else if (isAuthenticated == undefined) {
    return new Response("Error", { status: 500 });
  }
}

console log is: ReadableStream { locked: false, state: 'readable', supportsBYOB: false }

const address is undefined.

This is the api call:

const response = await fetch("/api/auth", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({ address: walletAddress }),
        });
        const data = await response.json();

I read in another answer to a similar question that nextjs12+ is supposed to parse the request automatically- what am I doing wrong? I'm assuming that nextjs has a protocol in place for decoding the ReadableStream but I can't find anything in the docs or examples for this, maybe because there is a framework agnostic method for decoding the object that is unknown to me?

Thank you in advance.

• javascript
• next.js
• fetch-api
• next.js13

Share Improve this question Follow edited Mar 31, 2023 at 15:08 Bigboss01 asked Mar 31, 2023 at 14:00 Bigboss01Bigboss01 61811 gold badge77 silver badges2626 bronze badges 5

• have you tried doing const { address } = JSON.parse(req.body); – inkredusk Commented Mar 31, 2023 at 14:13
• @inkredusk i've tried this, but it doesn't work: SyntaxError: Unexpected token 'o', "[object Rea"... is not valid JSON – Bigboss01 Commented Mar 31, 2023 at 15:14
• Not works in 13.4.1 – ReZ Commented May 8, 2023 at 21:31
• @ReZ, try FahadAlAraik's answer, it works correctly for me- in general, you need to check if you are receiving a readable stream object and decoding it to json. I had an issue where I was making an api request to my server component, which made an api request to an external api. I couldn't retrieve the external api response without first decoding it in my server component and encoding it again before sending it client side. if you want to post a question, ill see if i can help – Bigboss01 Commented May 9, 2023 at 8:47
• @Bigboss01 Thanks for the reply, but i solved my problem. I used typescript in my next aplication, so i got a type error because i didn't use the correct type. I was using NexApiRequest instead of NextRequest. – ReZ Commented May 9, 2023 at 13:30

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 31

I've faced a similiar problem, you can try this:

const body = await req.json()
const {address} = body
// the rest of your code 

you need to await the request from nextjs in order to get the body object. Like the code bellow:

import { NextResponse } from "next/server";

export async function POST(req) {
    
    const body = await req.json();
    console.log(body);
    
    return NextResponse.json(body);
}

A discord user recommended const address = await req.json(); instead of const {address} = req.body and it works.

I think what you want to do is:

...
const { address } = req.body
const isAuthenticated = await checkBalance(address, threshold);
...

本文标签： javascriptDecode ReadableStream object nextjs 13 api routeStack Overflow