如何通过Next.js将环境变量在客户端获得？

发布于 2025-02-09 19:17:06 字数 749 浏览 2 评论 0原文

我想将环境变量读取到Next.js，如何将数据传递到datadogrum.init中？

// _app.tsx

import React from "react";
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: applicationID, // can't use process.env.NEXT_PUBLIC_DATADOG_APPLICATION_ID directly here
      ...
    });

    datadogRum.startSessionReplayRecording();
  });

  return (
    ...
  );
}

App.getInitialProps = async () => {
  return {
    applicationID: process.env.NEXT_PUBLIC_DATADOG_APPLICATION_ID,
  };
};

这样，无法获得applicationId值。

原文

I want to read environment variable into Next.js, how to pass data into datadogRum.init?

// _app.tsx

import React from "react";
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: applicationID, // can't use process.env.NEXT_PUBLIC_DATADOG_APPLICATION_ID directly here
      ...
    });

    datadogRum.startSessionReplayRecording();
  });

  return (
    ...
  );
}

App.getInitialProps = async () => {
  return {
    applicationID: process.env.NEXT_PUBLIC_DATADOG_APPLICATION_ID,
  };
};

This way can't get the applicationID value.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

无声情话 2025-02-16 19:17:06

您无需从getInitialProps传递环境变量。您可以在usefect中直接访问它，您只需要确保process.env.next_public_datadog_application_id在初始化datadogrum.init之前定义打字冲突。

export default function App({ Component, pageProps }: AppProps) {
    useEffect(() => {
        if (typeof process.env.NEXT_PUBLIC_DATADOG_APPLICATION_ID !== "undefined")
            datadogRum.init({
                applicationId: process.env.NEXT_PUBLIC_DATADOG_APPLICATION_ID
                ...
            });

            datadogRum.startSessionReplayRecording();
        }
    });

    return (
        ...
    );
}

You don't need to pass the environment variable from getInitialProps. You can access it directly inside the useEffect, you just need to make sure process.env.NEXT_PUBLIC_DATADOG_APPLICATION_ID is defined before initialising datadogRum.init to avoid typings conflicts.

export default function App({ Component, pageProps }: AppProps) {
    useEffect(() => {
        if (typeof process.env.NEXT_PUBLIC_DATADOG_APPLICATION_ID !== "undefined")
            datadogRum.init({
                applicationId: process.env.NEXT_PUBLIC_DATADOG_APPLICATION_ID
                ...
            });

            datadogRum.startSessionReplayRecording();
        }
    });

    return (
        ...
    );
}

回复收藏 0 原文

~没有更多了~