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 Fingerprint Pro agent capabilities are fully supported. This library also provides you with all necessary wrappers for using Fingerprint 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.
Updated 5 months ago