2023-11-17

NextJS 13 in Azure: process.env.{SETTING_NAME} in server components is undefined

I upgraded to NextJS v13 from v12. I thought components inside the src/app folder are server components by default but when I try to use the values from process.env after deploying with Azure, its returning undefined for those configuration settings.

It works when I run it locally maybe because those settings are in a .env file but after deployment it should get it from the Azure configuration settings. Here is the sample page:

src/app/page.tsx

import SampleClientView from '@components/components/client/SampleClientView'; // This has 'use client';

const SamplePage = () => {
  const configOne = process.env.CONFIG_ONE;
  const configTwo = process.env.CONFIG_TWO;

  return (
    <SampleClientView
      configOne={configOne}
      configTwo={configTwo}
    />
  );
};

export default SamplePage;


No comments:

Post a Comment