Parse.initialize error when using env variable

hello👋🏻, I got error Error: You need to call Parse.initialize before using Parse. when i am using environment variable, but when I try to use NEXTPUBLIC, i works fine.

i have security concern when using NEXT_PUBLIC_, is there anything i should try?

this is my next js _app.js file

// Client-side cache, shared for the whole session of the user in the browser.
const clientSideEmotionCache = createEmotionCache();

interface MyAppProps extends AppProps {
  emotionCache?: EmotionCache;
}

const layouts: any = {
  Blank: BlankLayout,
};

initializeParse(
  process.env.PARSE_SERVER_URL ?? "",
  process.env.PARSE_APP_ID ?? "",
  process.env.PARSE_JS_KEY ?? ""
);

const MyApp = (props: MyAppProps) => {
  const {
    Component,
    emotionCache = clientSideEmotionCache,
    pageProps,
  }: any = props;
  const theme = ThemeSettings();
  const Layout = layouts[Component.layout] || FullLayout;

  return (
    <CacheProvider value={emotionCache}>
      <Head>
        <meta name="viewport" content="initial-scale=1, width=device-width" />
        <title>Modernize NextJs Admin template</title>
      </Head>
      <ThemeProvider theme={theme}>
          <CssBaseline />
          <Layout>
            <Component {...pageProps} />
          </Layout>
      </ThemeProvider>
    </CacheProvider>
  );
};

export default (props: MyAppProps) => (
  <Provider store={Store}>
    <MyApp {...props} />
  </Provider>
);

parse-community / parse-react

Parse.initialize error when using env variable #133