游牧周记第40期
开发
nextjs的google ads问题
我的nextjs网站,似乎在集成ads时都一直有问题。 原来的代码:
<Script async src={`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${process.env.NEXT_PUBLIC_ADSENSE_ID}`} crossOrigin="anonymous" strategy="afterInteractive" />
AD不会显示,并有warning:
adsbygoogle.js?client=undefined:225 AdSense head tag doesn't support data-nscript attribute.
按照ChatGpt说法:
问题就出在 Next.js 的
<Script>组件:它会额外加上data-nscript之类的属性,而 Google AdSense 的脚本是 严格要求只能原样引入 的。
✅ 正确做法
直接用原生 <script>,不要用 next/script:
// app/layout.tsx 或者 _document.tsx <head> <script async src={`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${process.env.NEXT_PUBLIC_ADSENSE_ID}`} crossOrigin="anonymous" ></script> </head>
❗️另外注意
-
process.env.NEXT_PUBLIC_ADSENSE_ID必须在 .env 文件里定义,例如:NEXT_PUBLIC_ADSENSE_ID=ca-pub-1234567890123456并且要以 NEXT_PUBLIC_ 开头,否则 Next.js 不会暴露到前端。
-
Google AdSense 要求 必须在
<head>内加载,不要放到<body>。
当然我还是硬编码ads id方便一些。






