This is a Next.js project bootstrapped with create-next-app.
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.
本项目目的是展示在Next.js框架中怎样使用 Google reCAPTCHA 控件来验证，本着最小demo的原则，讲述本项目的创建过程，当然你可以直接下载本项目运行，只要替换 app/concact/page.tsx 中的 sitekey 和 app/api/submit-form/route.tsx 中的 secretKey 就可以了，下面来说说本项目的创建步骤，方面大家直接在自己的项目中集成 Google reCAPTCHA。
操作之前确保你的开发环境中已经安装了 Node.js 和 npm。你可以通过以下命令检查安装版本：
node -v
npm -vnpx create-next-app@latest nextjs-recaptcha在这里，nextjs-recaptcha 是你希望创建的项目名称。运行这个命令后，你会被提示选择一些选项（如是否使用 TypeScript，是否需要 ESLint 等）。
cd nextjs-recaptcha
npm install react-google-recaptcha中间如果遇到代码引用找不到 react-google-recaptcha 的情况运行以下命令，目的是将包添加到开发依赖（devDependencies）中
npm i --save-dev @types/react-google-recaptcha创建不存在的文件夹和文件，直接复制文件内容替换即可，注意修改成自己的sitekey 和 secretKey
完成上面步骤后，使用以下命令启动项目，之后访问 http://域名:3000 就可以进行测试了
npm run dev- 申请 Google reCAPTCHA 的网站 https://www.google.com/recaptcha/admin
- Google reCAPTCHA申请的key只对绑定的域名有效，如果本地测试可以申请域名
localhost