Cloudflare Turnstile not loading in Next.js project

I am using Cloudflare Turnstile in my Next.js project. I have embedded the widget in my form like below:

<form>
     <input type="text" required />
     <div className="cf-turnstile" data-sitekey="code" data-callback={javascriptCallback}/>
     <input type="submit" />
</form>

For some reason when I navigate in between pages, the Turnstile widget does not load, but if I go to the page that the widget is embedded it and refresh, it will load. I have been struggling with this issue for a few days now trying to fix it. It would be amazing if someone could help me out. Thank you in advance.

Thank you,
Lucas.

1 Like

May I ask if you’re calling a script for Turnstile to display the widget as well on each page? :thinking:

I import the Cloudflare Turnstile script at the top of what I am rendering on the page. It is only imported on my contact page (where Turnstile is embedded) as I don’t use Turnstile on any other pages. This is what my code structure looks like:

return (
  <main>
    <Script
      src={"https://challenges.cloudflare.com/turnstile/v0/api.js"}
      async={true}
      defer={true}
    />
    <form>
      <input type="text" required />
      <div
        className="cf-turnstile"
        data-sitekey="code"
        data-callback={javascriptCallback}
      />
      <input type="submit" />
    </form>
  </main>
);

I’m new to turnstile, and not familiar with Next.js, but is your site by any chance a single-page application (SPA)? If so, maybe this will help: Pre-Clearance support · Cloudflare Turnstile docs