1. Navigate to Dashboard -> Click on Install Mida Pixel
2. Click on the NextJS button once you have opened the panel and follow the installation guide.
3. Make sure you have installed the mida-nextjs package using the npm package manager in your terminal:
4. Add the MidaScript component between <head> and </head> of your document:
For App Router: add it in app root layout file.
For Page Router: add it in _document file.
Example:
5. Once you're done with the changes in your NextJS Application, navigate back to the installation guide and verify the installation.
Experiencing flickering or loading issues?
If you notice additional flickering, delayed rendering, or script loading issues when using the mida-nextjs npm package, you can alternatively install Mida directly without the package.
Follow the steps below to use the standalone script integration instead of the npm package:
<Script
id="flicker-prevention"
strategy="beforeInteractive"
dangerouslySetInnerHTML={{
__html: `
var timeout = 3000; // Timeout value to remove the flicker (in milliseconds)
!function(h,i,d,e){
var t,n=h.createElement("style");
n.id=e;
n.innerHTML="body{opacity:0}";
h.head.appendChild(n);
t=d;
i.rmfk=function(){
var t=h.getElementById(e);
t && t.parentNode.removeChild(t)
};
setTimeout(i.rmfk,t)
}(document,window,timeout,"abhide");
`
}}
/>
<Script
src="https://cdn.mida.so/js/optimize.js?key=PROJECT_KEY_HERE"
strategy="beforeInteractive"
/>
<Script
id="preconnect-mida"
strategy="beforeInteractive"
dangerouslySetInnerHTML={{
__html: `
const link = document.createElement('link');
link.rel = 'preconnect';
link.href = 'https://api-us.mida.so';
document.head.appendChild(link);
`
}}
/>
Last Resort: Enhanced Anti-Flicker Setup for Next.js
If you are still experiencing a brief flash of the original content before the variant loads (even with the standard anti-flicker script), this can be caused by how Next.js hydrates and re-renders the DOM.
As a last resort, you can use the enhanced anti-flicker setup below, which forces the page to stay fully hidden until Mida has finished applying the variant.
1. Add this updated anti-flicker script in your <head>
<Script
id="anti-flicker"
strategy="beforeInteractive"
dangerouslySetInnerHTML={{
__html: `
!function(){
var t=3e3,e=document.createElement("style");
e.id="abhide";
e.innerHTML="body{opacity:0 !important}";
document.head.appendChild(e);
var i=setInterval(function(){
document.getElementById("abhide")||(document.body.style.opacity="",clearInterval(i),clearTimeout(o))
},50);
var o=setTimeout(function(){
var t=document.getElementById("abhide");
t&&t.parentNode&&t.parentNode.removeChild(t);
document.body.style.opacity="";
clearInterval(i)
},t)
}();
`
}}
/>
2. Keep the Mida script as-is
{/* Can remain the same */} <Script src="https://cdn.mida.so/js/optimize.js?key={YOUR_PROJECT_KEY_HERE}" strategy="beforeInteractive" />
3. Keep the preconnect script as-is
{/* Can remain the same */} <Script id="preconnect-mida" strategy="beforeInteractive" dangerouslySetInnerHTML={{ __html: ` const link = document.createElement('link'); link.rel = 'preconnect'; link.href = 'https://api-us.mida.so'; document.head.appendChild(link); ` }} />
4. Add this inline style to the <body> (important)
<body style={{ opacity: 0 }}>
{children}
</body>⚠️ Important Note
The inline opacity: 0 on the <body> is only safe as long as the Mida script and anti-flicker script are present.
If these scripts are removed and the body style is left in place, the site would remain invisible.
So if you ever uninstall Mida, make sure to also remove the style={{ opacity: 0 }} from the <body>.
This setup ensures:
• The original page never flashes
• The white screen fully covers the initial render
• The variant is shown immediately once Mida is ready