4 replies

T3 Env accessing VERCEL_URL on client side

Hello,
I've been working on making sure that our .env variables are typesafe when I came across T3 Env. I tried it out and managed to create a env object replicating my .env.local file.

Here's env.ts

import { createEnv } from '@t3-oss/env-nextjs';
import { vercel } from '@t3-oss/env-core/presets';

import { z } from 'zod';

export const env = createEnv({
    extends: [vercel()],
    server: {
      ...
    },
    client: {
      ...
    },
    // For Next.js >= 13.4.4, you only need to destructure client variables:
    experimental__runtimeEnv: {
       ...
    },
});

import { createEnv } from '@t3-oss/env-nextjs';
import { vercel } from '@t3-oss/env-core/presets';

import { z } from 'zod';

export const env = createEnv({
    extends: [vercel()],
    server: {
      ...
    },
    client: {
      ...
    },
    // For Next.js >= 13.4.4, you only need to destructure client variables:
    experimental__runtimeEnv: {
       ...
    },
});

And this is a function which I use on client side

import { env } from '@/env';

export const getURL = () => {
    let url =
        env.NEXT_PUBLIC_SITE_URL ?? // Set this to your site URL in production env.
        env.VERCEL_URL ?? // Automatically set by Vercel.
        'http://localhost:3000/';
    // Make sure to include `https://` when not localhost.
    url = url.includes('http') ? url : `https://${url}`;
    // Make sure to include a trailing `/`.
    url = url.charAt(url.length - 1) === '/' ? url : `${url}/`;
    return url;
};

import { env } from '@/env';

export const getURL = () => {
    let url =
        env.NEXT_PUBLIC_SITE_URL ?? // Set this to your site URL in production env.
        env.VERCEL_URL ?? // Automatically set by Vercel.
        'http://localhost:3000/';
    // Make sure to include `https://` when not localhost.
    url = url.includes('http') ? url : `https://${url}`;
    // Make sure to include a trailing `/`.
    url = url.charAt(url.length - 1) === '/' ? url : `${url}/`;
    return url;
};

When run it throws this error
Error:

Attempted to access a server-side environment variable on the client

As far as I know the VERCEL_URL should be public. How can I convert it to be public and access it on client side?

T3 Env accessing VERCEL_URL on client side

import { createEnv } from '@t3-oss/env-nextjs';
import { vercel } from '@t3-oss/env-core/presets';

import { z } from 'zod';

export const env = createEnv({
    extends: [vercel()],
    server: {
      ...
    },
    client: {
      ...
    },
    // For Next.js >= 13.4.4, you only need to destructure client variables:
    experimental__runtimeEnv: {
       ...
    },
});

import { createEnv } from '@t3-oss/env-nextjs';
import { vercel } from '@t3-oss/env-core/presets';

import { z } from 'zod';

export const env = createEnv({
    extends: [vercel()],
    server: {
      ...
    },
    client: {
      ...
    },
    // For Next.js >= 13.4.4, you only need to destructure client variables:
    experimental__runtimeEnv: {
       ...
    },
});

And this is a function which I use on client side

import { env } from '@/env';

export const getURL = () => {
    let url =
        env.NEXT_PUBLIC_SITE_URL ?? // Set this to your site URL in production env.
        env.VERCEL_URL ?? // Automatically set by Vercel.
        'http://localhost:3000/';
    // Make sure to include `https://` when not localhost.
    url = url.includes('http') ? url : `https://${url}`;
    // Make sure to include a trailing `/`.
    url = url.charAt(url.length - 1) === '/' ? url : `${url}/`;
    return url;
};

import { env } from '@/env';

export const getURL = () => {
    let url =
        env.NEXT_PUBLIC_SITE_URL ?? // Set this to your site URL in production env.
        env.VERCEL_URL ?? // Automatically set by Vercel.
        'http://localhost:3000/';
    // Make sure to include `https://` when not localhost.
    url = url.includes('http') ? url : `https://${url}`;
    // Make sure to include a trailing `/`.
    url = url.charAt(url.length - 1) === '/' ? url : `${url}/`;
    return url;
};

When run it throws this error
Error:

Attempted to access a server-side environment variable on the client

As far as I know the VERCEL_URL should be public. How can I convert it to be public and access it on client side?

T3 Env accessing VERCEL_URL on client side

Similar Threads

T3 Env accessing VERCEL_URL on client side

Similar Threads

Similar Threads

Similar Threads