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);
`
}}
/>