iceform/packages/iceform-next-sandbox/src/pages/greet.tsx

import * as React from 'react';
import * as Iceform from '@modal-sh/iceform-next';

const GreetPage: Iceform.NextPage = ({
  req,
  res,
}) => {
  const {response, ...isoformProps} = Iceform.useResponse(res);

  const [responseData, setResponseData] = React.useState<unknown>();
  React.useEffect(() => {
    response?.json().then((responseData) => {
      setResponseData(responseData);
    });
  }, [response]);

  return (
    <div>
      <h1>Iceform</h1>
      <h2>
        Request
      </h2>
      <h3>Query</h3>
      <pre>
        {JSON.stringify(req.query)}
      </pre>
      {typeof req.body !== 'undefined' && (
        <>
          <h3>Body</h3>
          <pre>
            {JSON.stringify(req.body)}
          </pre>
        </>
      )}
      <h2>
        Response
      </h2>
      {typeof res.body !== 'undefined' && (
        <pre>
          {JSON.stringify(res.body)}
        </pre>
      )}
      {typeof responseData !== 'undefined' && (
        <pre>
          {JSON.stringify(responseData)}
        </pre>
      )}
      <Iceform.Form
        {...isoformProps}
        method="post"
        action="/a/greet"
        clientAction="/api/greet"
      >
        <input
          type="text"
          name="name"
        />
        <button
          type="submit"
        >
          Submit
        </button>
      </Iceform.Form>
    </div>
  );
};

export const getServerSideProps = Iceform.destination.getServerSideProps();

export default GreetPage;