Theo's Typesafe Cult•5mo ago

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?

3 Replies

SalivopKOP•5mo ago

Do I have to extract it and make it public in the env object itself or maybe there's even a smarter way to do this. Thanks for all the support!

Matvey•5mo ago

VERCEL_URL is server-only, use NEXT_PUBLIC_VERCEL_URL

SalivopKOP•5mo ago

But how should I extract that. Since

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

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

which is used in

    extends: [vercel()],

    extends: [vercel()],

only gives us these variables

Gaming

Programming

T3 Env accessing VERCEL_URL on client side