Closed elaser closed 7 months ago
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
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!
oops, turns out it was related to #104 !
Just for future reference, the original question is covered in the documentation here: Usage with Server-side Rendering Frameworks.
Hi there!
When looking at the tutorial for installing fingerprintjs on next, it looks like the example is for Next page router:
I was wondering how this can be done with the new app router? Thank you!
I tried putting it in
app/layout.tsx
and then calling it from a page:
but I get "Failed to load the JS script of the agent".
Thank you for looking at this!