Hi everyone! I'm encountering a strange issue with environment variables in Next.js server components, specifically in a root layout context.

My scenario:
- I need to read an environment variable (IRIS_HOME) at runtime in a Docker environment
- Works perfectly with .env files, but not with Docker env variables
- Need runtime env values due to our deployment pipeline

Here's my component:

export default async function Navbar() {
    const irisHome = process.env.IRIS_HOME;
    console.log('irisHome:', irisHome); // This logs correctly
    
    return (
        <div>
            <a href={irisHome}> // This is undefined
                <i className="fa-solid fa-right-from-bracket"></i>
            </a>
        </div>
    )
}

Troubleshooting steps:

- Confirmed env var exists in Docker (can read it in env grep)
- Console.log shows correct value before render
- Tried using server actions - no success
- Variable becomes undefined when used in JSX
- Works fine with .env files, only breaks with Docker env

Current workaround is to use headers():

import { headers } from 'next/headers';

export default async function Navbar() {
    headers(); // Forces server context
    const irisHome = process.env.IRIS_HOME;
    // Now works...
}

But this feels hacky. Is there a proper way to handle runtime environment variables in server components? The "use server" directive alone doesn't seem to guarantee true server-side execution.
Any help appreciated! 🙏