attempt to load fromend rum config from .env file. Did not succeed

src/frontend/next.config.js

@@ -11,6 +11,8 @@ const myEnv = dotEnv.config({
   path: resolve(__dirname, '../../.env'),
 });
 dotenvExpand.expand(myEnv);
+console.log(`in next.config.js, process.env: ${JSON.stringify(process.env, null, 2)}`)
+
 
 const {
   AD_SERVICE_ADDR = '',
@@ -24,6 +26,10 @@ const {
   OTEL_EXPORTER_OTLP_TRACES_ENDPOINT = '',
   OTEL_SERVICE_NAME = 'frontend',
   PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT = '',
+  NEXT_PUBLIC_SPLUNK_REALM = '',
+  NEXT_PUBLIC_SPLUNK_RUM_TOKEN = '',
+  NEXT_PUBLIC_SPLUNK_RUM_APP_NAME = '',
+  NEXT_PUBLIC_SPLUNK_RUM_ENV = '',
 } = process.env;
 
 const nextConfig = {
@@ -100,6 +106,10 @@ const nextConfig = {
     NEXT_PUBLIC_PLATFORM: ENV_PLATFORM,
     NEXT_PUBLIC_OTEL_SERVICE_NAME: OTEL_SERVICE_NAME,
     NEXT_PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT: PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT,
+    NEXT_PUBLIC_SPLUNK_REALM,
+    NEXT_PUBLIC_SPLUNK_RUM_TOKEN,
+    NEXT_PUBLIC_SPLUNK_RUM_APP_NAME,
+    NEXT_PUBLIC_SPLUNK_RUM_ENV,
   },
 };
 

src/frontend/splunk-rum.js

@@ -1,8 +1,44 @@
+import React, { useEffect } from 'react';
 import SplunkRum from '@splunk/otel-web';
 
-SplunkRum.init({
-    realm: "us1",
-    rumAccessToken: "Qad35m7E6ld6p_-O_RxwEg",
-    applicationName: "astroshop",
-    deploymentEnvironment: "astroshop"
-});
+export async function getStaticProps() {
+  // Logs will be printed to the terminal
+  console.log('in splunk-rum.js, getStaticProps(), NEXT_PUBLIC_SPLUNK_REALM=', process.env.NEXT_PUBLIC_SPLUNK_REALM);
+
+  return {
+    props: {
+      rumRealm: process.env.NEXT_PUBLIC_SPLUNK_REALM,
+      rumToken: process.env.NEXT_PUBLIC_SPLUNK_RUM_TOKEN,
+      rumAppName: process.env.NEXT_PUBLIC_SPLUNK_RUM_APP_NAME,
+      rumEnv: process.env.NEXT_PUBLIC_SPLUNK_RUM_ENV,
+    },
+  };
+}
+
+const HomePage = ({ rumRealm, rumToken, rumAppName, rumEnv }) => {
+  useEffect(() => {
+   console.log('HomePage component mounted');
+    SplunkRum.init({
+      realm: rumRealm,
+      rumAccessToken: rumToken,
+      applicationName: rumAppName,
+      deploymentEnvironment: rumEnv,
+    });
+  }, [rumRealm, rumToken, rumAppName, rumEnv]);
+
+  return (
+    <div>
+	  <h1> Splunk RUM Enabled</h1>
+    </div>
+  );
+};
+
+export default HomePage;
+
+//SplunkRum.init({
+//    realm: rumRealm,
+//    rumAccessToken: rumToken,
+//    applicationName: rumAppName,
+//    deploymentEnvironment: rumEnv,
+//  });
+