chore: make the localhost port in the trpc Provider dynamic to work on ports other than 3000

env/client.ts

@@ -1,8 +1,8 @@
 import { createEnv } from "@t3-oss/env-nextjs"
-// import { z } from "zod";
+import { z } from "zod"
 
 export const env = createEnv({
-  client: {},
+  client: { NEXT_PUBLIC_PORT: z.string().optional() },
   emptyStringAsUndefined: true,
-  runtimeEnv: {},
+  runtimeEnv: { NEXT_PUBLIC_PORT: process.env.PORT },
 })

lib/trpc/Provider.tsx

@@ -3,7 +3,7 @@
 import { useState } from "react"
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 import { httpBatchLink } from "@trpc/client"
-
+import { env } from "@/env/client"
 import { api } from "./client"
 import { transformer } from "@/server/transformer"
 
@@ -15,7 +15,7 @@ function initializeTrpcClient() {
         /**
          * This is locally in Next.js
          */
-        url: "http://localhost:3000/api/trpc",
+        url: `http://localhost:${env.NEXT_PUBLIC_PORT}/api/trpc`,
       }),
     ],
   })