use next public

client/next.config.js

@@ -2,7 +2,7 @@
 const nextConfig = {
   output: "standalone",
   env: {
-    BACKEND_URL: process.env.BACKEND_URL,
+    NEXT_PUBLIC_BACKEND_URL: process.env.NEXT_PUBLIC_BACKEND_URL,
   },
 };
 

client/src/app/components/Header/Header.tsx

@@ -11,8 +11,8 @@ export function Header() {
   const { data } = useQuery<{ count: number }>({
     queryKey: ["active-sessions"],
     queryFn: () =>
-      fetch(`${process.env.BACKEND_URL}/live-user-count`).then((res) =>
-        res.json()
+      fetch(`${process.env.NEXT_PUBLIC_BACKEND_URL}/live-user-count`).then(
+        (res) => res.json()
       ),
   });
 

client/src/hooks/api.ts

@@ -22,7 +22,7 @@ export function useGenericQuery<T>(
     queryFn: () => {
       const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
       return fetch(
-        `${process.env.BACKEND_URL}/${endpoint}?startDate=${startDate}&endDate=${endDate}&timezone=${timezone}`
+        `${process.env.NEXT_PUBLIC_BACKEND_URL}/${endpoint}?startDate=${startDate}&endDate=${endDate}&timezone=${timezone}`
       ).then((res) => res.json());
     },
     staleTime: Infinity,
@@ -106,7 +106,7 @@ export function useGetPageviews(): UseQueryResult<
     queryFn: () => {
       const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
       return fetch(
-        `${process.env.BACKEND_URL}/pageviews?startDate=${startDate}&endDate=${endDate}&timezone=${timezone}&bucket=${bucket}`
+        `${process.env.NEXT_PUBLIC_BACKEND_URL}/pageviews?startDate=${startDate}&endDate=${endDate}&timezone=${timezone}&bucket=${bucket}`
       ).then((res) => res.json());
     },
     placeholderData: keepPreviousData,

docker-compose.yml

@@ -59,7 +59,7 @@ services:
       - NODE_ENV=production
       - CLICKHOUSE_HOST=http://clickhouse:8123
       - CLICKHOUSE_DB=analytics
-      - BACKEND_URL=${BASE_URL}
+      - NEXT_PUBLIC_BACKEND_URL=${BASE_URL}
     depends_on:
       - backend