How to get post data in NextJS with Typescript?

Question

I wrote a function to get posted form data in a NextJs page. While this works, the req and res parameters aren't typed:

const getBody = promisify(bodyParser.urlencoded());

export async function getServerSideProps({ req, res }) {

  if (req.method === "POST") {
    await getBody(req, res);
  }

  return {
    props: {
      input: req.body?.input
    }
  }
}

I've tried using req: NextApiRequest, res: NextApiResponse with an interface but the function body won't work:

interface ExtendedNextApiRequest extends NextApiRequest {
  body: {
    input: string;
  };
}

export async function getServerSideProps(req: ExtendedNextApiRequest, res: NextApiResponse) {

  if (req.method === "POST") {
    await getBody(req, res);
  }

  return {
    props: {
      input: req.body?.input
    }
  }
}

However I get a serialization error:

Error: Error serializing `.input` returned from `getServerSideProps` in "/my-page".
Reason: `undefined` cannot be serialized as JSON. Please use `null` or omit this value.

Can you please update your question to include the tsx you're returning for that page or just the form snippet? — ninnjak
– ninnjak, Commented Jul 21, 2022 at 13:40
I just wanted to make sure that you updated your input name to match the server side props: <input name="input" defaultValue={props.input} /> — ninnjak
– ninnjak, Commented Jul 21, 2022 at 15:03
I found that it's best to use GET with forms. Post forms don't seem to be supported, and the hack I have breaks sometimes. — Jason
– Jason, Commented Aug 17, 2022 at 22:15

rgodha24 · Accepted Answer · 2022-07-21 14:30:05Z

1

Your problem is that you are using getServerSideProps as an API endpoint. getServerSideProps is meant to be be used to fetch data from an API endpoint or backend logic and pass it to the function component, so it can not handle post methods. If you want to make an API endpoint, you can make a function in the /pages/api directory. You can strong type that like this:

import type { NextApiHandler } from "next";

let handler: NextApiHandler<any> = async (req, res) => {
    // your code goes here
};

export default handler;

where the any can be replaced by the type of the api response.

answered Jul 21, 2022 at 14:30

rgodha24

611 silver badge2 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jason Over a year ago

Do you have an example of posting data to a new page? The original does work for me if I ignore the TS warning.

Collectives™ on Stack Overflow

How to get post data in NextJS with Typescript?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related