Next.js and SSR Integration

Integrate Turnstile with Next.js applications, handling server-side rendering, hydration, and script loading optimization.

Important: Client-Side Only

Turnstile is a client-side only library. It must not run during server-side rendering.

App Router

Basic Setup with 'use client'

Always use the 'use client' directive in files using Turnstile:

'use client'

import { Turnstile } from '@marsidev/react-turnstile'