Hello 🙂
We are building a WebApp hosted in an aks-cluster. There i have defined backend urls depending on the environment we are currently in (staging or production) into the Pod environment variable (see image from Env Vars seen in Lens).

Now I want to access these env variables in the code to fetch data from the respective backend. I am doing that by using the getServerSideProps() function like this:

interface PageProps {
  backend_url: string,
  session: Session
}

 const myPage: NextPage<PageProps> = ({backend_url}) => {
# doStuff and return page
}

export async function getServerSideProps(context: NextPageContext){
  const backend_url = process.env.BACKEND_URL;
  return {
    props: { 
      backend_url,
      session : await getSession(context)
    }
  }
}
export default myPage;

The weird thing is in one place in the application it works, but not in another place. There the process.env.BACKEND_URL returns undefined.

Things I have tried:
- renaming the Variable to NEXT_PUBLIC_BACKEND_URL -> undefined
- adding the env to next.config.js like:

const nextConfig = {
  reactStrictMode: true,
  output:"standalone",
  env: {
    BACKEND_URL: process.env.BACKEND_URL,
  }
}
module.exports = nextConfig

The element where it works is a "full page", where it does not work is in a Navbar.
I am fairly new to nextjs so maybe I am overlooking something very obvious. Do you guys have any idea why I can load the env variables on one point but not the other?