无_app.js/_document.js，Next.js集成Google Analytics失败求助

你在Next.js 13+的App Router模式下使用了Pages Router专属的next/head组件，这个组件在App Router的布局文件中不会生效，所以GA脚本无法被注入页面。

下面提供两种符合App Router规范的GA集成方式，任选其一即可：

方案1：直接在<head>标签内编写脚本 #

App Router的RootLayout允许直接在<html>标签下嵌套原生<head>标签，无需依赖next/head组件：

import "./css/style.css";
import { Inter } from "next/font/google";
import Header from "@/components/ui/header";

const inter = Inter({
  subsets: ["latin"],
  variable: "--font-inter",
  display: "swap",
});

export const metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
  icons: {
    icon: "/images/logo.png", // 统一在metadata中设置favicon，避免重复代码
  },
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <head>
        <meta charSet="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        
        {/* Google Analytics 脚本 */}
        <script async src="https://www.googletagmanager.com/gtag/js?id=someid"></script>
        <script
          dangerouslySetInnerHTML={{
            __html: `
              window.dataLayer = window.dataLayer || [];
              function gtag(){dataLayer.push(arguments);}
              gtag('js', new Date());
              gtag('config', 'someid');
            `,
          }}
        />
      </head>
      <body
        className={`${inter.variable} font-inter antialiased bg-white text-gray-900 tracking-tight`}
      >
        <div className="flex flex-col min-h-screen overflow-hidden supports-[overflow:clip]:overflow-clip">
          <Header />
          {children}
        </div>
      </body>
    </html>
  );
}

方案2：使用next/script组件（推荐） #

Next.js提供的next/script组件针对App Router做了加载策略优化，适合处理分析类脚本：

import "./css/style.css";
import { Inter } from "next/font/google";
import Script from "next/script";
import Header from "@/components/ui/header";

const inter = Inter({
  subsets: ["latin"],
  variable: "--font-inter",
  display: "swap",
});

export const metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
  icons: {
    icon: "/images/logo.png",
  },
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <head>
        <meta charSet="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      </head>
      <body
        className={`${inter.variable} font-inter antialiased bg-white text-gray-900 tracking-tight`}
      >
        {/* Google Analytics 脚本 */}
        <Script
          src="https://www.googletagmanager.com/gtag/js?id=someid"
          strategy="afterInteractive" // 页面交互后加载，不阻塞首屏
        />
        <Script id="google-analytics" strategy="afterInteractive">
          {`
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', 'someid');
          `}
        </Script>

        <div className="flex flex-col min-h-screen overflow-hidden supports-[overflow:clip]:overflow-clip">
          <Header />
          {children}
        </div>
      </body>
    </html>
  );
}

• 你的项目同时存在app和pages目录，属于混合路由模式，但RootLayout遵循App Router规则，必须使用上述方式管理头部脚本。
• 替换代码中的someid为你实际的GA跟踪ID。

内容的提问来源于stack exchange，提问作者yemy