typescript - Hur får man miljövariabler på klientsidan med Next.js?

Jag vill läsa miljövariabel i Next.js, hur skickar man data till 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,
  };
};

Det här sättet kan inte få värdet på applicationID.

Svar #1

Du behöver inte skicka miljövariabeln från getInitialProps. Du kan komma åt den direkt inne i useEffect, du behöver bara se till att process.env.NEXT_PUBLIC_DATADOG_APPLICATION_ID är definierad innan du initialiserar datadogRum.init för att undvika typkonflikter.

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 (
        ...
    );
}