EU CAPTCHA for Next.js

Frequently Asked Questions

• How do I add EU CAPTCHA to a Next.js application?

  Install the package with npm i @myrasec/eu-captcha. Create a Client Component marked with 'use client', import { EuCaptcha, isEuCaptchaDone } from '@myrasec/eu-captcha', and place <EuCaptcha sitekey={sitekey} /> inside your form. Call isEuCaptchaDone() on submit and pass the eu-captcha-response token to a Server Action or API Route Handler for server-side validation.

• Does EU CAPTCHA work with the Next.js App Router?

  Yes. In the App Router, place the EuCaptcha component inside a Client Component marked with the 'use client' directive, as the widget requires browser APIs. Token verification happens in a Server Action or Route Handler which runs on the server, keeping your secret key safe.

• Can I use EU CAPTCHA with Next.js Server Actions?

  Yes. Server Actions are the recommended pattern for App Router forms. Your Client Component form captures the eu-captcha-response token and passes it as a hidden input or form data field to the Server Action. The Server Action then calls the EU CAPTCHA verification API with your secret key before processing the rest of the form data.

• Is EU CAPTCHA compatible with the Next.js Pages Router?

  Yes. In the Pages Router, use the EuCaptcha component from @myrasec/eu-captcha inside your form. The token is sent to a Next.js API route (pages/api/) where you call the EU CAPTCHA verification endpoint with your secret key before processing the submitted data.

• How do I avoid hydration errors when using EU CAPTCHA in Next.js?

  Since the EuCaptcha component from @myrasec/eu-captcha requires browser APIs, always place it inside a Client Component ('use client'). In the Pages Router, you can also use dynamic import with ssr: false to prevent any server-side rendering of the widget and avoid hydration mismatches.

• How do I validate the CAPTCHA token in a Next.js Route Handler?

  In your Route Handler (app/api/route.ts), extract the eu-captcha-response value from the request body. Make a POST request to the EU CAPTCHA verification API with your secret key and the token. If the API returns a successful response, proceed to process the form data. Otherwise, return a 400 or 422 error to the client.

• Is EU CAPTCHA GDPR compliant for Next.js applications?

  Yes. EU CAPTCHA is operated by an EU-based company, is hosted entirely in Germany, and does not rely on US cloud providers or infrastructure subject to US surveillance laws. The service processes only the data necessary to provide and verify the CAPTCHA (such as IP address and technical browser or device information) in line with the requirements of the GDPR. Your organization remains responsible for providing transparent privacy information, selecting an appropriate legal basis, and obtaining any required consent for your specific Next.js implementation. This information does not constitute legal advice; please consult your legal counsel for an assessment of your individual case.