Next.js

Using FingerprintJS Pro React library with Next.js

FingerprintJS Pro React is an official open-source package for React ecosystem. This library provides developers with native experience using React components and hooks together with a built-in caching mechanism. All FingerprintJS Pro agent capabilities are fully supported. This library also provides you with all necessary wrappers for using FingerprintJS Pro with Next.js.

Sample usage

Add @fingerprintjs/fingerprintjs-pro-react as a dependency to your application via npm or yarn.

npm install @fingerprintjs/fingerprintjs-pro-react

yarn add @fingerprintjs/fingerprintjs-pro-react

Wrap your application (or component) in FpjsProvider. You can specify multiple configuration options.

// pages/_app.tsx
import '../styles/globals.css'
import type { AppProps } from 'next/app'
import { FpjsProvider } from '@fingerprintjs/fingerprintjs-pro-react'

function MyApp({ Component, pageProps }) {
  return (
    <FpjsProvider
      loadOptions={{
        apiKey: 'fingerprintjs-pro-public-api-key',
      }}
    >
      <Component {...pageProps} />
    </FpjsProvider>
  )
}

export default MyApp

Use the useVisitorData hook in your components to perform visitor identification and get the data.

// pages/index.tsx
import type { NextPage } from 'next'
import Head from 'next/head'
import styles from '../styles/Home.module.css'
import { useVisitorData } from '@fingerprintjs/fingerprintjs-pro-react'
import { useState } from 'react'

const Home: NextPage = () => {
  const [extendedResult, updateExtendedResult] = useState(false)
  const { isLoading, error, data, getData } = useVisitorData({ extendedResult }, { immediate: true })

  const reloadData = () => {
    getData({ ignoreCache: true })
  }

  const onChangeExtendedResult = (e) => {
    updateExtendedResult(e.target.checked)
  }

  return (
    <div className={styles.container}>
      <Head>
        <title>FingerprintJS Pro NextJS Demo</title>
        <meta name='description' content='Check if fingerprintjs-pro-react integration works with NextJS SSR' />
        <link rel='icon' href='/favicon.ico' />
      </Head>

      <h1>FingerprintJS Pro NextJS Demo</h1>
      <div className={styles.testArea}>
        <div className={styles.controls}>
          <button onClick={reloadData} type='button'>
            Reload data
          </button>
          <label>
            <input type='checkbox' onChange={onChangeExtendedResult} checked={extendedResult} />
            Extended result
          </label>
        </div>
        <h4>
          VisitorId: <span className={styles.visitorId}>{isLoading ? 'Loading...' : data?.visitorId}</span>
        </h4>
        <h4>Full visitor data:</h4>
        <pre className={styles.data}>{error ? error.message : JSON.stringify(data, null, 2)}</pre>
      </div>
    </div>
  )
}

export default Home

Documentation

You can find the whole documentation in the official GitHub repository. The repository also contains an example app demonstrating usage of the library.