Does anyone have a working solution for integrating Google AdSense with Next.js 14 and 15 App router? I’ve been trying to implement it but keep encountering various errors, such as:
Error 1: A preload for 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-967420172673476' is found, but is not used because the request credentials mode does not match. Consider taking a look at the
crossoriginattribute.
Error 2:
hook.js:608 AdSense head tag doesn't support data-nscript attribute.
I’m using the <Script> component to add the AdSense script in the <head>.
ROOT LAYOUT
<Script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-967420172673476" crossOrigin="anonymous" strategy="lazyOnload" ></Script>COMPONENT
useEffect(() => { const loadAd = () => { if (typeof window !== "undefined" && window.adsbygoogle) { window.adsbygoogle = window.adsbygoogle || []; window.adsbygoogle.push({}); adsLoaded.current = true; } };
if (!adsLoaded.current) { setTimeout(loadAd, 0); } }, []);
return ( <> <div className={container}> <div className={styles.top}> <div className={styles.container}> <ins className="adsbygoogle" style={{ display: "block", width: "100%", height: "100%" }} data-ad-client="ca-pub-967420172673476" data-ad-slot="354160287" data-ad-format="auto" data-full-width-responsive="true" ></ins> </div> </div>Has anyone successfully resolved these issues? Any guidance or examples would be greatly appreciated!