Next.js客户端如何获取环境变量并传入datadogRum.init？

你原有代码拿不到值有两个核心原因：

• App.getInitialProps返回的自定义字段会作为顶层props传入App组件，但你在组件参数里只解构了Component和pageProps，根本没接收applicationID参数，作用域内自然找不到这个变量
• 带NEXT_PUBLIC_前缀的Next.js环境变量本身就支持客户端侧直接读取，完全不需要绕路通过getInitialProps传递，多写了一层冗余逻辑反而容易出错

直接在useEffect里读取带公开前缀的环境变量即可，注意给useEffect加上空依赖数组，避免组件重渲染时重复初始化RUM导致重复上报：

// _app.tsx
import { useEffect } from "react";
import type { AppProps } from "next/app";
import { datadogRum } from "@datadog/browser-rum";

export default function App({ Component, pageProps }: AppProps) {
  useEffect(() => {
    datadogRum.init({
      applicationId: process.env.NEXT_PUBLIC_DATADOG_APPLICATION_ID as string,
      clientToken: process.env.NEXT_PUBLIC_DATADOG_CLIENT_TOKEN as string,
      site: process.env.NEXT_PUBLIC_DATADOG_SITE as string,
      service: "你的项目服务名",
      // 补充其余你需要的RUM配置项
      sessionReplaySampleRate: 100,
      trackUserInteractions: true,
      trackResources: true,
      trackLongTasks: true,
      defaultPrivacyLevel: "mask-user-input",
    });

    datadogRum.startSessionReplayRecording();
  }, []);

  return <Component {...pageProps} />;
}

• 要在客户端代码里读取的环境变量，必须以NEXT_PUBLIC_开头，没有此前缀的变量仅会在Node.js服务端侧生效，客户端代码读取时值为undefined
• 如果你用的是Next.js 13+的App Router（app目录），需要把上述RUM初始化逻辑放到标记了'use client'的客户端组件中，服务端组件不能直接运行浏览器侧的RUM SDK
• 修改.env相关环境变量文件后，必须重启Next.js开发/构建服务，新的环境变量值才会生效
• 不要保留原有的自定义getInitialProps返回applicationID的逻辑，这会强制App组件每次路由跳转都执行服务端逻辑，拖慢页面响应速度，完全没有必要

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