Skip to content

Server Side Rendering

Since environment variables are statically injected into the client-side's globalThis.import_meta_env , you'll need to use the client-side's hook (or similar technique) to obtain these environment variables.

For example, in NEXT.js you can use the useEffect hook to access globalThis.import_meta_env:

tsx
import { useEffect, useMemo, useState } from "react";

const useImportMetaEnv = () => {
  const [env, setEnv] = useState({ HELLO: "" });

  useEffect(() => {
    setEnv({ HELLO: import.meta.env.HELLO });
  }, []);

  return useMemo(() => env, [env]);
};

export default function Home() {
  const env = useImportMetaEnv();

  return <h1>Hello: {env.HELLO}</h1>;
}

Released under the MIT License.