nextjs

Next.js & Friendly Captcha

This is an example integration of Friendly Captcha with the Next.js framework.

Screenshot

Relevant files

• components/friendlyCaptcha.js the Friendly Captcha Widget as a React component.
• pages/forms/basic.js an example form that is protected with a Friendly Captcha widget. The submit button is only enabled after the widget is done.
• pages/api/submitBasic.js the endpoint that receives the data from the above form, it talks to the siteverify endpoint to validate the captcha solution.

Running the example

• Create a file called .env.local with your sitekey and API key:

  NEXT_PUBLIC_FRIENDLY_CAPTCHA_SITEKEY=FCMASQ....
  FRIENDLY_CAPTCHA_API_KEY=A10V6RT9B2...

• npm install
• npm run dev
• Open your browser at http://localhost:3000

Tips for integrating Friendly Captcha into your own project

Set up a transpile plugin (Next JS 11 and below only)

The friendly-challenge library is exported as an ES module. To make Next.js 11 and below understand it we install a plugin:

• Install next-transpile-modules

  npm install --save-dev next-transpile-modules

• Add the following to your next.config.js:

  // Package docs at https://github.com/martpie/next-transpile-modules
  const withTM = require("next-transpile-modules")(["friendly-challenge"]);
  
  module.exports = withTM({});

Please take a look at the Compatibility table to make sure you have the right version of the plugin installed.

Supporting very old browsers

If you want to support very outdated browsers (>4 years old, such as Internet Explorer 11), you should import the compat version of the library. Change the import from friendly-challenge to friendly-challenge/compat.