diff --git a/src/utils/trpc-provider.tsx b/src/utils/trpc-provider.tsx
index 1f4c605..334ec73 100644
--- a/src/utils/trpc-provider.tsx
+++ b/src/utils/trpc-provider.tsx
@@ -2,17 +2,27 @@
 
 import { QueryClientProvider } from '@tanstack/react-query'
 import { getFetch, httpBatchLink, loggerLink } from '@trpc/client'
+import { signOut, useSession } from 'next-auth/react'
 import { useEffect, useState } from 'react'
 import superjson from 'superjson'
 import queryClient from './query-client'
 import { trpc } from './trpc'
-import { signOut, useSession } from 'next-auth/react'
 
-export const TrpcProvider = ({ children }: { children: React.ReactNode }) => {
-  const url = process.env.NEXT_PUBLIC_VERCEL_URL
-    ? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`
-    : 'http://localhost:3000/api/trpc/'
+const getBaseUrl = () => {
+  if (typeof window !== 'undefined')
+    // browser should use relative path
+    return ''
+  if (process.env.VERCEL_URL)
+    // reference for vercel.com deployments
+    return `https://${process.env.VERCEL_URL}`
+  if (process.env.NEXTAUTH_URL)
+    // reference for non-vercel providers
+    return process.env.NEXTAUTH_URL
+  // assume localhost
+  return `http://localhost:${process.env.PORT ?? 3000}`
+}
 
+export const TrpcProvider = ({ children }: { children: React.ReactNode }) => {
   const [trpcClient] = useState(() =>
     trpc.createClient({
       links: [
@@ -20,7 +30,7 @@ export const TrpcProvider = ({ children }: { children: React.ReactNode }) => {
           enabled: () => true,
         }),
         httpBatchLink({
-          url,
+          url: `${getBaseUrl()}/api/trpc`,
           fetch: async (input, init?) => {
             const fetch = getFetch()
             return fetch(input, {