NextJS登録後にメッセージを表示する

Question

登録フォームのある NextJS 13 アプリケーションがあります。私が統合している API では、ユーザーはサインアップ後に電子メールを確認する必要があります。私がやりたいのは、登録フォームが成功したら、フォームフィールドを削除し、確認メールをチェックする必要があることを伝えるメッセージを表示することですが、代わりにログインフォームにリダイレクトされます。私は現在 NextJS を学習しているため、使用しているコードはサンプル リポジトリから取得したものです。ログインページにリダイレクトせずにメッセージを表示するように変更することはできますか?

登録ページは次のようになります:

'クライアントを使用'

import { useForm } from 'react-hook-form'

import { useUserService } から '@/app/_services'

エクスポートデフォルト登録

関数 Register() {
    const userService = useUserService()

    const { レジスタ、handleSubmit、formState } = useForm()

    非同期関数 onSubmit(user) {
        userService.register(ユーザー)を待ちます
    }

    戻る （
        <>
            <フォーム
                onSubmit={ハンドルサブミット(onSubmit)}
            >
                <div className="col-span-full">
                    <ラベル
                        htmlFor="電子メール"
                    >
                        電子メールアドレス
                    </ラベル>
                    <入力
                        type="電子メール"
                        { ...登録("メール") }
                    />
                </div>
                <div className="col-span-full">
                    <ラベル
                        htmlFor="パスワード"
                    >
                        パスワード
                    </ラベル>
                    <入力
                        type="パスワード"
                        { ...登録("パスワード") }
                    />
                </div>
                <div className="col-span-full pt-5">
                    <ボタン
                        無効={formState.isSubmitting}
                    >
                        <span>登録</span>
                    </ボタン>
                </div>
            </フォーム>
        </>
    ）
}

実際に登録された関数は useUserService ファイルにあり、詳細は次のとおりです。

register: async (user) => {
    アラートサービス.clear()

    試す {
        await fetch.post('/api/authentication/register', user);

        router.push('/login');
    } キャッチ (エラー) {
        アラートサービス.error(エラー);
    }
},

Answer 1

ログイン ページにリダイレクトせずにメッセージを表示するには、useState フックを使用して、登録の成功ステータスに基づいて UI を管理します。

1. useState をインポートする リーリー
2. 成功した登録ステータスを追加します リーリー
3. 登録成功ステータスを true に設定します リーリー
4. 登録が成功した場合は、メッセージを表示します。 リーリー

   );

5. 登録されたサービスから router.push を削除します リーリー