Next.js 13 - Hydration error in production

Hi there,

I have a Next.js 13+ application that uses t3-env. I have public env variables in my project:

import { createEnv } from '@t3-oss/env-nextjs';
import { z } from 'zod';

export const env = createEnv({
  server: {
    ...
  },
  skipValidation: process.env.SKIP_ENV_VALIDATION === 'true',
  client: {
    NEXT_PUBLIC_PRIMARY_MAIN: z.string().min(1).default('#00b49d'),
    NEXT_PUBLIC_PRIMARY_CONTRAST: z.string().min(1).default('#fff'),
  },
  experimental__runtimeEnv: {
    NEXT_PUBLIC_PRIMARY_MAIN: process.env.NEXT_PUBLIC_PRIMARY_MAIN,
    NEXT_PUBLIC_PRIMARY_CONTRAST: process.env.NEXT_PUBLIC_PRIMARY_CONTRAST,
  },
  emptyStringAsUndefined: true,
});

I have placed the env.mjs file in my root directory (same level as my next config).

I am accessing these variables on both the client and the server. When I access it on the server, it works fine. However, when I use it on the client, the correct env value is displayed for about half a second, and then it falls back to the default value. In dev mode, Next says it's a hydration error.

I should also mention that it works fine locally. It only happens in production. My application is deployed on AWS (an Ubuntu server) and is dockerized.

Has anyone ever run into this problem?

Huge thanks.

t3-oss / t3-env

Next.js 13 - Hydration error in production #208