Sorry if this is dumb but where do I pass appId to CroctProvider in Next.js?
Sorry if this is a dumb question, I am a junior dev at my first job and I have been stuck on this for longer than I want to admit. I followed the React docs which clearly show wrapping the app in <CroctProvider appId="...">, and that is exactly what I tried to do in our Next.js App Router project, but TypeScript tells me the provider from @croct/plug-next/CroctProvider does not accept an appId prop at all. I checked the package version, I reinstalled node_modules, I even tried casting the props which I know is bad. The app ID is definitely correct because I copied it from the dashboard twice. Where is the prop supposed to go in Next.js? Sorry again if I am missing something obvious.
1 answer
Not dumb at all, this trips up plenty of people because the two docs pages look nearly identical. You are mixing the React SDK docs with the Next.js SDK. The appId prop belongs to the provider from @croct/plug-react. The Next.js provider from @croct/plug-next/CroctProvider is environment driven: it reads the app ID from NEXT_PUBLIC_CROCT_APP_ID and takes no appId prop on purpose.
So in your Next.js project:
# .env.localNEXT_PUBLIC_CROCT_APP_ID=<your app id>import {CroctProvider} from '@croct/plug-next/CroctProvider';
export default function RootLayout({children}) { return ( <html> <body> <CroctProvider>{children}</CroctProvider> </body> </html> );}Delete the cast, set the env var, restart the dev server so Next picks it up, and you are done.
That was exactly it, I had the React docs open in the other tab the whole time. Thank you so much for being kind about it!