如何在 Next.js 表單中添加 ReCaptcha
ReCaptcha 是 Google 對表單垃圾郵件和濫用的解決方案。 這是一個非常有價值的工具。如果您還沒有在 https://www.google.com/recaptcha 創建帳戶，請先創建並添加您的網站域名。 選擇 v2，並選擇「我不是機器人」複選框： 你會獲得一個站點金鑰和站點密鑰。 將密鑰儲存在您的.env文件中： RECAPTCHA_SECRET=<....> 現在，在您的 Next.js 網站中使用 npm 安裝react-google-recaptcha： npm install react-google-recaptcha 現在，在具有表單的頁面中引入它： import ReCAPTCHA from 'react-google-recaptcha' 並將其添加到 JSX 中： <ReCAPTCHA size="normal" sitekey="<YOUR SITE KEY>" /> 您應該在表單中看到它： 現在，如果您嘗試提交表單，它能正常工作，因為它什麼都不做。任何人，包括機器人，在不點擊「我不是機器人」按鈕的情況下都可以成功提交表單。 您需要在服務器端驗證驗證碼，以使其有用。 假設您將表單發送到 Next.js API 路由。在其中，添加一個validateCaptcha方法： const validateCaptcha = (response_key) => { return new Promise((resolve, reject) => { const secret_key = process.env.RECAPTCHA_SECRET const url = `https://www.google.com/recaptcha/api/siteverify?secret=${secret_key}&response=${response_key}` fetch(url, { method: 'post' }) .then((response) => response.json()) .then((google_response) => { if (google_response....