Next.js
Integrate the Geelab Device Fingerprint v2 Web SDK with the Next.js Pages Router or App Router
Before you begin, follow the JavaScript integration guide to load the SDK, create the shared client module, and configure the TypeScript declarations. This page covers only Next.js-specific initialization and usage.
The GeeLabGuard Web SDK can run only in the browser. Do not call it from a Server Component,
getServerSideProps, Route Handler, or API Route.
First follow the JavaScript integration guide to create the shared geeGuardClient.ts module and add the TypeScript declarations.
Pages Router
Load the SDK from pages/_document.tsx:
import { Html, Head, Main, NextScript } from 'next/document';
import Script from 'next/script';
export default function Document() {
return (
<Html lang="en">
<Head>
<Script
src="./gld_v2.js"
strategy="beforeInteractive"
/>
</Head>
<body><Main /><NextScript /></body>
</Html>
);
}Call preloadGeeGuard() from a useEffect in pages/_app.tsx:
useEffect(function () {
preloadGeeGuard().catch(function (error) {
console.error('GeeLabGuard initialization failed:', error);
});
}, []);App Router
Load the SDK from the root layout and mount a client preloader component:
// app/layout.tsx
import Script from 'next/script';
import GeeGuardPreloader from './GeeGuardPreloader';
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<Script
src="./gld_v2.js"
strategy="beforeInteractive"
/>
<GeeGuardPreloader />
{children}
</body>
</html>
);
}// app/GeeGuardPreloader.tsx
'use client';
import { useEffect } from 'react';
import { preloadGeeGuard } from '../src/geeGuardClient';
export default function GeeGuardPreloader() {
useEffect(function () {
preloadGeeGuard().catch(function (error) {
console.error('GeeLabGuard initialization failed:', error);
});
}, []);
return null;
}Any business component that calls getGeeToken() must also be a Client Component.