NextJS本地环境中react-google-recaptcha组件无法显示问题求助

• 确认环境变量加载状态
  检查.env.local里的NEXT_PUBLIC_RECAPTCHA_KEY是否拼写正确，NextJS只有带NEXT_PUBLIC_前缀的变量才会暴露给客户端。可以在组件里加个console.log(recaptchaKey)，看看输出的是有效密钥还是undefined。

• 强制组件在客户端渲染
  NextJS 13+ App Router默认是服务器组件，而react-google-recaptcha必须在客户端环境运行。给组件顶部加上'use client'指令：

  'use client';
  import { ReCAPTCHA } from "react-google-recaptcha";
  
  const recaptchaKey = process.env.NEXT_PUBLIC_RECAPTCHA_KEY;
  
  // ...
  
  <form>
    <ReCAPTCHA sitekey={recaptchaKey} />
  </form>
  

• 核对ReCAPTCHA控制台域名配置
  登录ReCAPTCHA后台，授权域名只需要填localhost和127.0.0.1，不要加http://或端口号。配置后等几分钟再测试，设置可能有延迟。

• 检查网络请求情况
  打开浏览器开发者工具的Network标签，刷新页面看有没有向www.google.com/recaptcha/api.js的请求。如果请求失败，大概率是网络环境无法访问Google服务，需要解决网络连通问题。

• 手动加载脚本或指定渲染容器
  要是组件自动加载脚本失败，试试手动引入脚本，或者给组件指定容器：

  'use client';
  import { useEffect } from 'react';
  import { ReCAPTCHA } from "react-google-recaptcha";
  
  const recaptchaKey = process.env.NEXT_PUBLIC_RECAPTCHA_KEY;
  
  useEffect(() => {
    const script = document.createElement('script');
    script.src = `https://www.google.com/recaptcha/api.js?render=${recaptchaKey}`;
    script.async = true;
    document.body.appendChild(script);
    return () => document.body.removeChild(script);
  }, [recaptchaKey]);
  
  // ...
  
  <div id="recaptcha-container"></div>
  <form>
    <ReCAPTCHA sitekey={recaptchaKey} container="recaptcha-container" />
  </form>
  

内容的提问来源于stack exchange，提问作者Horkos