如何在 nex.js 中处理 google recaptcha google.com 和 recapthca.net blocked

Question

在我的 next.js 项目中，我有 Grecapthca 组件。

import axiosApi from '../lib/axiosApi';
import { responseError } from '../lib/errorHandle';
import dynamic from 'next/dynamic';
import { useRouter } from 'next/router';
import React, { createRef, useEffect } from 'react';
import Swal from 'sweetalert2';

const ReCAPTCHA = dynamic(() => import('react-google-recaptcha'), { ssr: false });

export const Grecaptcha = ({ intl, setGrecaptcha = null }) => {
    const recaptchaRef = createRef();
    const router = useRouter();

    useEffect(() => {
        if (typeof window !== 'undefined') {
            window.recaptchaOptions = {
                useRecaptchaNet: true,
            };
        }
    }, []);

    return (
        <div className="captcha-container mb-16">
            <div className="captcha-content">
                <ReCAPTCHA
                    sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_SITEKEY}
                    ref={recaptchaRef}
                    onChange={() => {
                       setGrecaptcha(recaptchaRef.current.getValue());
                    }}
                    hl={router.locale}
                    onErrored={() => {
                        console.log('onErrored');
                    }}
                    onExpired={() => {
                        console.log('onExpired');
                    }}
                />
            </div>
            <div className="loading">
                <div className="preloader" />
            </div>
        </div>
    );
};

我更改 System32 中的主机文件并阻止 google.com 和 recapthca.net。如果 google.com 和 recapthca.net 域被阻止，我想处理在页面中显示错误消息。