In the documentation for next.js, it's mentioned that runtime environment variables can be utilized on dynamically rendered pages.
The test scenario being discussed involves a Next.js 14 project with an app router.
On the page below, the environment variable gets replaced by its runtime value (defined in a docker-compose.yml file):
import { unstable_noStore as noStore } from 'next/cache'
import styles from './page.module.css'
export default function Home() {
// Function to enable dynamic rendering
noStore();
const value = process.env.SOME_ENV_VARIABLE;
return (
<main>
{ value }
</main>
)
}
However, upon adding the 'use client' directive at the top of the page, the environment variable value from the docker-compose file briefly shows up before being replaced by undefined.
(While not needed in this example, the 'use client' directive is required in my actual project where I use both runtime environment variables and useState)
Upon repeatedly refreshing the page, it initially displays 'this-is-a-test-env-value' (the value from the docker-compose file) but then changes to undefined.
https://i.stack.imgur.com/GQLpZ.gif
Is there a way to effectively combine the 'use client' directive with runtime environment variables on a dynamically rendered page?