I have the following component in the footer. On the main page, I get a "mailto:undefined" when hovering over, but not on a secondary page. On the main page I also get the console warning in the browser: hook.js:608 Warning: Prop href did not match. Server: "mailto:[email protected]" Client: "mailto:undefined" Error Component Stack

this code was copied to try to do a simple hiding of the email address, but I'm not sure why it only works on the secondary page

"use client";

import { useState } from "react";

export default function EmailLink() {
  const [emailVisible, setEmailVisible] = useState(false);
  const email = process.env.SMTP_USER;
  
  return (
    <a 
      href={`mailto:${email}`} 
      className="hover:text-accent"
      onMouseEnter={() => {console.log('onMouseEnter'); setEmailVisible(true) } }
      onMouseLeave={() =>  {console.log('onMouseLeave'); setEmailVisible(false) } }
    >
      <img 
        src="/email.png" 
        alt={emailVisible ? email : "Email Support"} 
        className="inline-block" 
      />
    </a>
  );
}

I have the following component in the footer. On the main page, I get a "mailto:undefined" when hovering over, but not on a secondary page. On the main page I also get the console warning in the browser: hook.js:608 Warning: Prop href did not match. Server: "mailto:[email protected]" Client: "mailto:undefined" Error Component Stack

this code was copied to try to do a simple hiding of the email address, but I'm not sure why it only works on the secondary page

"use client";

import { useState } from "react";

export default function EmailLink() {
  const [emailVisible, setEmailVisible] = useState(false);
  const email = process.env.SMTP_USER;
  
  return (
    <a 
      href={`mailto:${email}`} 
      className="hover:text-accent"
      onMouseEnter={() => {console.log('onMouseEnter'); setEmailVisible(true) } }
      onMouseLeave={() =>  {console.log('onMouseLeave'); setEmailVisible(false) } }
    >
      <img 
        src="/email.png" 
        alt={emailVisible ? email : "Email Support"} 
        className="inline-block" 
      />
    </a>
  );
}

• reactjs
• next.js

2 Answers 2

As per the docs,

Non-NEXT_PUBLIC_ environment variables are only available in the Node.js environment, meaning they aren't accessible to the browser (the client runs in a different environment).

You can either prefix env with NEXT_PUBLIC_

# .env.local
[email protected]

and change code to:

# email-link.tsx
"use client";

export default function EmailLink() {
  const [emailVisible, setEmailVisible] = useState(false);
  const email = process.env.NEXT_PUBLIC_SMTP_USER;
  ...
}

Or if you don't want to change the env variable, you can pass the email from parent server component:

# parent-component.tsx (must be a server component)
export default function ParantComponent() {
  const email = process.env.SMTP_USER;
  
  return <EmailLink email={email} />
}

Then change your client component to accept email as props:

# email-link.tsx
"use client";

export default function EmailLink({ email }: { email: string }) {
  ...
}

The reason this is happening is largely due to how you're accessing the environment variable. process.env.SMTP_USER is a server-only environment variable and isn't exposed to the client because it is not part of the JavaScript bundle that's sent to the browser. This is why you're getting undefined on the client and by extension; the mismatch error. If you want to access the SMTP_USER defined in the environment variable on the client, you'll have to expose it to the browser by prefixing it with:

NEXT_PUBLIC_SMTP_USER=some_value

Defining the environment variable this way makes it accessible on both the server and the client.