It"s not a bug of Effect

You can"t access environment variables in the browser dynamically
They are inlined by the Next.js only when accessed directly
Literally like this process.env.NEXT_PUBLIC_MY_VAR
https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables#bundling-environment-variables-for-the-browser

However, you can create a ConfigProvider from the inlined values and provide it

"use client";

import { useEffect } from "react";
import { Config, Effect, ConfigProvider } from "effect";

const NextConfigProvider = ConfigProvider.fromMap(
  new Map([
    [
      //
      "NEXT_PUBLIC_CONFIG_VALUE",
      process.env.NEXT_PUBLIC_CONFIG_VALUE!, // <-- will be inlined by Next
    ],
  ])
);

export default function Home() {
  useEffect(() => {
    console.log("process.env", process.env.NEXT_PUBLIC_CONFIG_VALUE);
    const result = Effect.runSync(
      Config.string("NEXT_PUBLIC_CONFIG_VALUE").pipe(
        Effect.withConfigProvider(NextConfigProvider)
      )
    );
    console.log("effect", result);
  }, []);

  return <div>{process.env.NEXT_PUBLIC_CONFIG_VALUE}</div>;
}

Or you can use Layer and provide it with Layer.setConfigProvider as shown here https://effect.website/docs/guides/configuration#fallback-operators

You"re right. Forgot about that. Sorry.

The only thing is that it doesn"t work in Convex Runtime, which is not a browser. The worst part about that is that it would be hard to create an easily accessible reproduction.

For now, I use the following workaround:

const api_key = yield* Config.redacted("API_KEY").pipe(
  Config.withDefault(
    Redacted.make(process.env["API_KEY"] ?? ""),
  ),
)

For environments that require static access you"ll need a custom provider and to list explicitely the env variables, nothing we can do. Would be good to open this issue in convex to see if there is a prefix like next that would automatically inline variables