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!
JuroUhlar commented
Just for future reference, the original question is covered in the documentation here: Usage with Server-side Rendering Frameworks.