Button not showing on Prod (but works on local)

Please HELP!!! I have an annoying issue/bug in my NextJS app or Vercel ?? (I know it’s Christmas, sorry; but this has a big impact on prod)

I’m fetching data in a server component, then I want to conditionally show a Button based on certain condition using logical and (&&) or ternary operator (? :). Anyway everything works on dev environment, but when deployed on Vercel, nothing is shown.

I’ve already purged vercel cache, redeployed app, but I didn’t work. WHY ??

I’m using Next 15.2.6 but looking at deployment summary on Vercel they use Next 15.5.9. I don’t know if that’s cause of the issue (or Not).

const Main = async () => {
  const { user } = await authenticateUser();
  .....

  return (
    <div className="...">
      {user?.account_type === "Free" && (
        <Button className="...">
          Upgrade
        </Button>
       )}
    </div>
  );
};

(sorry for the slow response, catching up after holidays)

This is almost definitely an issue with your authenticateUser() hook. There are lots of reasons why auth would work in development but not in prod, namely that you may not be correctly logged in.

I recommend adding a console.log(user) right after it and seeing what it returns in production

The && operator is working correctly, but user?.account_type === "Free" is returning false and therefore it displays nothing. If you switch it for a ternary you should see the other case

{user && user.account_type === "Free" ? (
  <button>Upgrade</button>
) : (
  <p> Not a free account </p>
)}

If logging the user confirms you aren't logged in, go through your login process again and try to see where it fails. For example, if your login process returns a session cookie that doesn't have your production domain on it, the browser will reject it. That's a pretty common bug that causes dev/prod parity issues