Consent Modal with NextJS
Hey Bens, sorry I will do my best to explain. I assume if the "Show consent modal" checkbox is checked and the "Consent modal text" has some text and translations are done and I have a firing triggers set to pageviews, I should see a modal on my website when loading the page. Am I right?
4 Replies
Ah I don’t think I saw the consent part in earlier messages. I will check my site later and see what I did while playing with this. That said I am not using the consent modal in production. But also the Zara’s debug modal can sometimes get cleared by soft navigation in nextjs which I did see before.
This is enough to show the default consent modal on my nextjs site:
If this is not working for you, I suspect there is something else going on in your nextjs code. The thing I mentioned earlier with zaraz debug view modal is when NextJS re-renders the DOM for a soft navigation - but can also happen if you have broken server side rendering. The easiest way to break server side rendering in nextjs is with a useSearchParams() hook too low in the component tree and/or without a suspense boundary - the can cause your entire site to be client side rendered. So search your code for that hook name and if found, read the docs: https://nextjs.org/docs/app/api-reference/functions/use-search-params
Functions: useSearchParams | Next.js
API Reference for the useSearchParams hook.
Oh and you can disable JavaScript in Chrome for testing purposes by opening the developer tools and pressing Cmd+P on mac, probably Ctrl+P on windows and searching for 'JavaScript'. By disabling JavaScript you can reload your nextjs site and just see if any content at all is server rendered. Ideally the majority of the site content is server rendered and/or you have a suspense boundary holding the dynamic content.