fingerprintjs/fingerprintjs-pro-react

Installing fingerprintjs on next.js app router

Closed this issue · 2 comments

elaser commented

Hi there!

When looking at the tutorial for installing fingerprintjs on next, it looks like the example is for Next page router:

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

export default function MyApp({Component, pageProps}: AppProps) {
  return (
    <FpjsProvider
      loadOptions={{
        apiKey: "<api key>"
      }}
    >
      <Component {...pageProps} />
    </FpjsProvider>
  )
}

I was wondering how this can be done with the new app router? Thank you!

I tried putting it in app/layout.tsx

<body className={inter.className}>
      <FpjsProvider
      loadOptions={{
        apiKey: "<api key>"
      }}>
      </FpjsProvider>
      {children}  
      </body>

and then calling it from a page:

import Image from "next/image";
import { useVisitorData } from '@fingerprintjs/fingerprintjs-pro-react'

export default function Home() {
  const {isLoading, error, data, getData} = useVisitorData(
    {extendedResult: true},
    {immediate: true}
  )

  return (
    <div>
      <button onClick={() => getData({ignoreCache: true})}>
        Reload data
      </button>
      <p>VisitorId: {isLoading ? 'Loading...' : data?.visitorId}</p>
      <p>Full visitor data:</p>
      <pre>{error ? error.message : JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

but I get "Failed to load the JS script of the agent".

Thank you for looking at this!

elaser commented

oops, turns out it was related to #104 !

JuroUhlar commented

Just for future reference, the original question is covered in the documentation here: Usage with Server-side Rendering Frameworks.