Trubstile with Next.js 14

Website, Application, Performance
1

What is the name of the domain?

What is the issue you’re encountering

hydration error

What are the steps to reproduce the issue?

MyComponent.tsx

  function _turnstileCb() {
    console.debug("_turnstileCb called")
    // @ts-ignore
    turnstile.render("#myWidget", {
      sitekey: process.env.NEXT_PUBLIC_CLOUDFLARE_SITE_KEY,
      theme: "dark",
    })
  }
return (
          <div id="myWidget"></div>
)

app/layout.tsx

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className="dark">
      <link rel="icon" href="/favicon.ico" sizes="any" />
      <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" defer></script>
      <body className={(inter.className, fireFoxes.variable)}>

I tried this as well

I’m following this guide - GitHub - nicitaacom/fork-turnstile-demo-workers: A simple demo with a Turnstile-protected form, using Cloudflare Workers.

Help me resole this issue
I’m expecting that you send me code I need to change to implement it into my Next.js 14 project without hydration error

2

This topic was automatically closed after 15 days. New replies are no longer allowed.