【Next.js】react-hook-formでFormProviderとuseFormContextを使い確認画面付きのフォームを作る

// next.jsの機能
import { useRouter } from "next/router";

// components : pages
import Input from "components/pages/contact/Input"; //入力画面
import Confirm from "components/pages/contact/Confirm"; // 確認画面

//react-hook-form
import { useForm, FormProvider } from "react-hook-form";

const Contact = () => {
  // パラメータを取得
  const router = useRouter();
  const isConfirm = router.query.confirm;

  // useFormの設定&使用したい機能を呼び出す
  const methods = useForm({
    mode: "onChange",
    criteriaMode: "all"
  });

  return (
    <div className="wrapper">
      <FormProvider {...methods}>
        {!isConfirm ? (
          <>
            <Input />
          </>
        ) : (
          <>
            <Confirm />
          </>
        )}
      </FormProvider>
    </div>
  );
};

export default Contact;

// パラメータを取得
const router = useRouter();
const isConfirm = router.query.confirm;

// next.jsの機能
import { useRouter } from "next/router";

//react-hook-form
import { useFormContext, SubmitHandler } from "react-hook-form"; // SubmitHandlerは、submitイベントに関する関数の型宣言に使う
import { ErrorMessage } from "@hookform/error-message"; //エラーメッセージコンポーネント

import type { ContactType } from "types/contact";

const Input = () => {
  const router = useRouter();

  const {
    register, //inputなどに入力された値を参照するために使う
    handleSubmit,
    formState: { errors, isValid }
  } = useFormContext();

  const onSubmit: SubmitHandler<ContactType> = async (data) => {
    console.log(data);
    //ここでバリデーション用APIを叩くなど処理をする想定
    router.push(`/?confirm=1`);
  };

  return (
    <>
      <h1>入力画面</h1>
      <form onSubmit={handleSubmit(onSubmit)}>
        <div className="form-unit">
          <p className="form-unit-title">お名前</p>
          <input
            type="text"
            className="input-text"
            placeholder="山田太郎"
            {...register("name", {
              required: "お名前は必須項目です。"
            })}
          />
          <ErrorMessage
            errors={errors}
            name="name"
            render={({ message }) =>
              message ? <p className="form-validateMessage">{message}</p> : null
            }
          />
        </div>

        <div className="form-unit">
          <p className="form-unit-title">お問い合わせ内容</p>
          <textarea
            className="input-textarea"
            placeholder="お問い合わせ内容を入力"
            {...register("content", {
              required: "お問い合わせ内容は必須項目です。"
            })}
          />
          <ErrorMessage
            errors={errors}
            name="content"
            render={({ message }) =>
              message ? <p className="form-validateMessage">{message}</p> : null
            }
          />
        </div>

        <div className="form-actionArea">
          {!isValid && (
            <>
              <p className="form-validateMessage">
                まだ全ての必須項目の入力が完了していません。
              </p>
            </>
          )}
          <div className="form-buttonWrapper">
            <button type="submit" className="form-submitButton">
              入力内容を確認する
            </button>
          </div>
        </div>
      </form>
    </>
  );
};

export default Input;

const onSubmit: SubmitHandler<ContactType> = async (data) => {
  //ここでバリデーション用APIを叩くなど処理をする想定
  router.push(`/?confirm=1`);
};

// next.jsの機能
import { useRouter } from "next/router";
import Link from "next/link";

//react-hook-form
import { useFormContext, SubmitHandler } from "react-hook-form"; // SubmitHandlerは、submitイベントに関する関数の型宣言に使う

import type { ContactType } from "types/contact";

const Confirm = () => {
  const router = useRouter();

  const {
    handleSubmit,
    getValues,
    formState: { isValid } //form内の入力の有無や送信の状態などを取得できる isValid以外にも色々ある
  } = useFormContext<ContactType>();

  const values = getValues(); // 入力データを取得

  //直アクセスの場合はリダイレクト
  //※必須項目の無いフォームは無いと思うのでisValidで判定
  if (!isValid) {
    router.push(`/`);
  }

  const onSubmit: SubmitHandler<ContactType> = async (data) => {
    //ここでメール送信などのAPIを叩くなど処理をする想定
    router.push("/complete");
  };

  return (
    <>
      <h1>入力内容確認画面</h1>
      <form onSubmit={handleSubmit(onSubmit)}>
        <div className="form-unit">
          <p className="form-unit-title">お名前</p>
          <p>{values.name}</p>
        </div>

        <div className="form-unit">
          <p className="form-unit-title">お問い合わせ内容</p>
          <p>{values.content}</p>
        </div>

        <div className="form-actionArea">
          <div className="form-buttonWrapper">
            <button type="submit" className="form-submitButton">
              送信する
            </button>
            <Link href="/">
              <a className="form-backButton">入力内容を修正する</a>
            </Link>
          </div>
        </div>
        <p>※ただのサンプルなのでどこにも送信されません。</p>
      </form>
    </>
  );
};

export default Confirm;

const values = getValues(); // 入力データを取得

//例
<p>{values.name}</p> //入力画面で入力したお名前を表示

const onSubmit: SubmitHandler<ContactType> = async (data) => {
  //ここでメール送信などのAPIを叩くなど処理をする想定
  router.push("/complete");
};

const Complete = () => {
  //直アクセスの場合は何かしらのフラグ管理をして、リダイレクト処理をする想定
  return (
    <div className="wrapper">
      <h1>お問い合わせありがとうございました。</h1>
      <p>
        <a href="/">トップに戻る</a>
      </p>
    </div>
  );
};

export default Complete;