page.tsx

import React, { useActionState } from "react";
const validate = _ => {};
const isValidationError = _ => {};
const isNetworkError = _ => {};
const DisplayError = ({
  error,
}: {
  error: ReturnType<typeof usePage>["error"];
}) => {
  if(isValidationError(error)) {
    return <>Validation Error</>
  } else if(isNetworkError(error)) {
    return <>Network Error</>
  }
  // unhandled error will be compile error.
  console.error("unknown erro", error satisfies never);
};
export const usePage = () => {
  const [error, handleSubmit, loading] = useActionState(
    async (prevState: unknown, value: string) => {
      const result = validate(value);
      if(!result.ok) {
        return result.error;
      }
      // do somthing
      try {
        const respose = await fetch("https://...", { method: "post", body: JSON.stringify(result.value) });
        if(!response.ok) {
          return new BadRequestError();
        }
        const json = await response.json():
      } catch (error) {
        return new NetworkError();
      }
    },
    null,
  );
  return {
    handleSubmit,
    loading,
    error,
  };
};