Next.js应用无法编写JQuery代码且埋点跟踪代码不生效如何解决？

1. 无法正常使用jQuery代码 #

问题原因 #

Next.js 默认支持服务端渲染/静态渲染，服务端运行环境没有window、document等浏览器对象，而jQuery强依赖浏览器环境，直接在服务端组件或渲染阶段调用会报错。

解决方案 #

• 所有用到jQuery的组件顶部必须加'use client'标记（仅Next.js 13+ App Router需要），声明为客户端组件
• 所有jQuery逻辑必须写在useEffect回调中，确保组件挂载到浏览器后再执行，参考示例：

'use client'
import { useEffect } from 'react'
// 提前通过npm install jquery安装依赖
import $ from 'jquery'

export default function DemoComponent() {
  useEffect(() => {
    // 此处可正常编写jQuery代码
    $('#demo').css('color', 'red')
  }, [])

  return <div id="demo">测试内容</div>
}

• 如果通过CDN引入jQuery，需要在根layout.js中通过Script组件全局引入，配置加载策略为beforeInteractive：

import Script from 'next/script'

export default function RootLayout({children}) {
  return (
    <html>
      <body>{children}</body>
      <Script 
        src="https://code.jquery.com/jquery-3.7.1.min.js" 
        strategy="beforeInteractive" 
      />
    </html>
  )
}

2. 埋点跟踪代码不生效 #

问题原因 #

你当前提供的代码存在两处核心问题：一是缺失谷歌分析官方的gtag外部脚本引入，仅写了初始化逻辑；二是没有正确配置Next.js Script组件的加载规则，内联脚本未按要求配置唯一ID。

解决方案 #

按如下格式调整埋点代码，写入根layout.js（App Router）或_app.js（Pages Router）即可：

import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <body>{children}</body>
      {/* 引入gtag官方外部脚本 */}
      <Script
        src="https://www.googletagmanager.com/gtag/js?id=UA-xxxxxxxxx-1"
        strategy="afterInteractive"
      />
      {/* 初始化gtag配置 */}
      <Script id="gtag-init" strategy="afterInteractive">
        {`
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
          gtag('config', 'UA-xxxxxxxxx-1');
        `}
      </Script>
    </html>
  )
}

如果需要监听页面跳转触发埋点，可在客户端组件中通过usePathname钩子监听路径变化，调用gtag('event', 'page_view')上报事件即可。

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