Next.js

在 Next.js Pages Router 或 App Router 中接入 Geelab 设备指纹 v2 Web SDK

开始前，请先按照 JavaScript 接入指南创建公共客户端模块并添加 TypeScript 类型声明。

GeeLabGuard Web SDK 只能在浏览器端执行。请勿在 Server Component、 getServerSideProps、Route Handler 或 API Route 中调用 SDK。

公共客户端模块建议命名为 geeGuardClient.ts。

Pages Router

在 pages/_document.tsx 中加载 SDK：

import { Html, Head, Main, NextScript } from 'next/document';
import Script from 'next/script';

export default function Document() {
  return (
    <Html lang="zh-CN">
      <Head>
        <Script
          src="./gld_v2.js"
          strategy="beforeInteractive"
        />
      </Head>
      <body><Main /><NextScript /></body>
    </Html>
  );
}

在 pages/_app.tsx 的 useEffect 中调用 preloadGeeGuard()：

useEffect(function () {
  preloadGeeGuard().catch(function (error) {
    console.error('GeeLabGuard 初始化失败:', error);
  });
}, []);

App Router

在根 Layout 中加载 SDK，并挂载客户端预加载组件：

// app/layout.tsx
import Script from 'next/script';
import GeeGuardPreloader from './GeeGuardPreloader';

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <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 初始化失败:', error);
    });
  }, []);
  return null;
}

调用 getGeeToken() 的业务组件也必须声明为 Client Component。

Next.js

Pages Router

App Router

On this page