Theo's Typesafe Cult•12mo ago

Accessing NEXT_PUBLIC_VERCEL_URL on Front End

TLDR: I am not able to set an env var to process.env.NEXT_PUBLIC_VERCEL_URL in my env.mjs file but when I try to directly access process.env.NEXT_PUBLIC_VERCEL_URL in my front end it works, so I know that is a valid env var. I tried to follow the same approach as accessing VERCEL_URL on the server env object from the default implementation below: Server env Object

server: {
    NEXTAUTH_URL: z.preprocess(
      // This makes Vercel deployments not fail if you don't set NEXTAUTH_URL
      // Since NextAuth.js automatically uses the VERCEL_URL if present.
      (str) => process.env.VERCEL_URL ?? str,
      // VERCEL_URL doesn't include `https` so it cant be validated as a URL
      process.env.VERCEL ? z.string().min(1) : z.string().url(),
    ),
    ...otherEnvVars
  },

server: {
    NEXTAUTH_URL: z.preprocess(
      // This makes Vercel deployments not fail if you don't set NEXTAUTH_URL
      // Since NextAuth.js automatically uses the VERCEL_URL if present.
      (str) => process.env.VERCEL_URL ?? str,
      // VERCEL_URL doesn't include `https` so it cant be validated as a URL
      process.env.VERCEL ? z.string().min(1) : z.string().url(),
    ),
    ...otherEnvVars
  },

And then accessing it in my auth.ts file like this: env.NEXTAUTH_URL. This works fine. When I follow a similar approach to access the var assigned to NEXT_PUBLIC_VERCEL_URL var provided on vercel deployments, I get this error: Application error: a client-side exception has occurred (see the browser console for more information). saying that my NEXT_PUBLIC_NEXTAUTH_URL env var is invalid. Here is how I am trying to do this: Client env Object

client: {
    NEXT_PUBLIC_NEXTAUTH_URL: z.preprocess(
      (str) => process.env.NEXT_PUBLIC_VERCEL_URL ?? str,
      // VERCEL_URL doesn't include `https` so it cant be validated as a URL
      process.env.VERCEL ? z.string().min(1) : z.string().url(),
    ),
    ...otherEnvVars
  },

client: {
    NEXT_PUBLIC_NEXTAUTH_URL: z.preprocess(
      (str) => process.env.NEXT_PUBLIC_VERCEL_URL ?? str,
      // VERCEL_URL doesn't include `https` so it cant be validated as a URL
      process.env.VERCEL ? z.string().min(1) : z.string().url(),
    ),
    ...otherEnvVars
  },

I am setting the server and client env vars the same:

runtimeEnv: {
    NEXTAUTH_URL: process.env.NEXTAUTH_URL,
    NEXT_PUBLIC_NEXTAUTH_URL: process.env.NEXT_PUBLIC_NEXTAUTH_URL,
  },

runtimeEnv: {
    NEXTAUTH_URL: process.env.NEXTAUTH_URL,
    NEXT_PUBLIC_NEXTAUTH_URL: process.env.NEXT_PUBLIC_NEXTAUTH_URL,
  },

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Accessing NEXT_PUBLIC_VERCEL_URL on Front End