fix: replace Docker env var placeholders with server-side EnvProvider context

 Next.js inlines NEXT_PUBLIC_* as truthy string literals at build time, causing the minifier to dead-code-eliminate all fallback branches. Runtime sed replacement with empty strings left functions returning "". Introduces buildClientEnv() in the server layout and a useEnv() React context so client components read real env values at request time, removing the need for placeholder/sed machinery for all vars except NEXT_PUBLIC_API_URL (still needed by packages/core).

Author: Medformatik

apps/web/Dockerfile

@@ -22,16 +22,11 @@ COPY packages/i18n/ packages/i18n/
 COPY apps/web/ apps/web/
 COPY turbo.json ./
 
-# Build with placeholders — replaced at runtime by docker-entrypoint.sh
+# Placeholder for packages/core which reads process.env.NEXT_PUBLIC_API_URL
+# directly (inlined at build time). Replaced at runtime by docker-entrypoint.sh.
+# All other NEXT_PUBLIC_* vars are provided via the EnvProvider React context
+# (built server-side from real process.env at request time) and need no placeholders.
 ENV NEXT_PUBLIC_API_URL=__NEXT_PUBLIC_API_URL__
-ENV NEXT_PUBLIC_MAPTILER_KEY=__NEXT_PUBLIC_MAPTILER_KEY__
-ENV NEXT_PUBLIC_MAPILLARY_TOKEN=__NEXT_PUBLIC_MAPILLARY_TOKEN__
-ENV NEXT_PUBLIC_MAP_STYLE_URL=__NEXT_PUBLIC_MAP_STYLE_URL__
-ENV NEXT_PUBLIC_TILES_URL=__NEXT_PUBLIC_TILES_URL__
-ENV NEXT_PUBLIC_STYLE_PROVIDER=__NEXT_PUBLIC_STYLE_PROVIDER__
-ENV NEXT_PUBLIC_TRAFFIC_MIN_ZOOM=__NEXT_PUBLIC_TRAFFIC_MIN_ZOOM__
-ENV NEXT_PUBLIC_TRAFFIC_TILE_URL_TEMPLATE=__NEXT_PUBLIC_TRAFFIC_TILE_URL_TEMPLATE__
-ENV NEXT_PUBLIC_CYCLOSM_TILE_URL_TEMPLATE=__NEXT_PUBLIC_CYCLOSM_TILE_URL_TEMPLATE__
 ENV NEXT_TELEMETRY_DISABLED=1
 
 WORKDIR /app/apps/web

apps/web/docker-entrypoint.sh

@@ -1,26 +1,16 @@
 #!/bin/sh
 set -e
 
-# Replace build-time placeholders with runtime environment variables.
-# Next.js inlines NEXT_PUBLIC_* as string literals during build — this script
-# patches the compiled JS bundles so the image works with any configuration.
+# Replace the NEXT_PUBLIC_API_URL build-time placeholder with the runtime value.
+#
+# packages/core reads process.env.NEXT_PUBLIC_API_URL directly in client code,
+# so Next.js inlines it at build time. This is the only env var that still needs
+# the placeholder/sed approach — all other NEXT_PUBLIC_* vars are served via the
+# EnvProvider React context (built server-side from real process.env per request).
 
-replace_env() {
-  local placeholder="$1"
-  local value="$2"
-  # Always replace — use empty string for unset vars so JS fallback logic works
-  find /app/apps/web/.next -name '*.js' -exec sed -i "s|${placeholder}|${value}|g" {} + 2>/dev/null || true
-  find /app/apps/web/.next -name '*.html' -exec sed -i "s|${placeholder}|${value}|g" {} + 2>/dev/null || true
-}
-
-replace_env "__NEXT_PUBLIC_API_URL__" "$NEXT_PUBLIC_API_URL"
-replace_env "__NEXT_PUBLIC_MAPTILER_KEY__" "$NEXT_PUBLIC_MAPTILER_KEY"
-replace_env "__NEXT_PUBLIC_MAPILLARY_TOKEN__" "$NEXT_PUBLIC_MAPILLARY_TOKEN"
-replace_env "__NEXT_PUBLIC_MAP_STYLE_URL__" "$NEXT_PUBLIC_MAP_STYLE_URL"
-replace_env "__NEXT_PUBLIC_TILES_URL__" "$NEXT_PUBLIC_TILES_URL"
-replace_env "__NEXT_PUBLIC_STYLE_PROVIDER__" "$NEXT_PUBLIC_STYLE_PROVIDER"
-replace_env "__NEXT_PUBLIC_TRAFFIC_MIN_ZOOM__" "$NEXT_PUBLIC_TRAFFIC_MIN_ZOOM"
-replace_env "__NEXT_PUBLIC_TRAFFIC_TILE_URL_TEMPLATE__" "$NEXT_PUBLIC_TRAFFIC_TILE_URL_TEMPLATE"
-replace_env "__NEXT_PUBLIC_CYCLOSM_TILE_URL_TEMPLATE__" "$NEXT_PUBLIC_CYCLOSM_TILE_URL_TEMPLATE"
+if [ -n "$NEXT_PUBLIC_API_URL" ]; then
+  find /app/apps/web/.next -name '*.js' -exec sed -i "s|__NEXT_PUBLIC_API_URL__|${NEXT_PUBLIC_API_URL}|g" {} + 2>/dev/null || true
+  find /app/apps/web/.next -name '*.html' -exec sed -i "s|__NEXT_PUBLIC_API_URL__|${NEXT_PUBLIC_API_URL}|g" {} + 2>/dev/null || true
+fi
 
 exec "$@"

apps/web/src/app/layout.tsx

@@ -8,6 +8,8 @@ import "mapillary-js/dist/mapillary.css";
 import "maplibre-theme/icons.default.css";
 import "maplibre-theme/classic.css";
 import "./globals.css";
+import { EnvProvider } from "@/lib/EnvProvider";
+import { buildClientEnv } from "@/lib/env";
 import { Providers } from "./providers";
 
 const plusJakartaSans = Plus_Jakarta_Sans({
@@ -25,14 +27,17 @@ export const metadata: Metadata = {
 export default async function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
   const locale = await getLocale();
   const messages = await getMessages();
+  const clientEnv = buildClientEnv();
 
   return (
     <html lang={locale} className={plusJakartaSans.variable} suppressHydrationWarning>
       <body className="h-dvh overflow-hidden antialiased">
         <InitColorSchemeScript attribute="class" defaultMode="system" />
         <AppRouterCacheProvider>
           <NextIntlClientProvider locale={locale} messages={messages}>
-            <Providers>{children}</Providers>
+            <EnvProvider config={clientEnv}>
+              <Providers>{children}</Providers>
+            </EnvProvider>
           </NextIntlClientProvider>
         </AppRouterCacheProvider>
       </body>

apps/web/src/app/status/StatusDashboard.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useCallback, useEffect, useState } from "react";
+import { useEnv } from "@/lib/EnvProvider";
 
 interface ServiceStatus {
   id: string;
@@ -17,8 +18,6 @@ interface StatusResponse {
   services: ServiceStatus[];
 }
 
-const API_URL = process.env.NEXT_PUBLIC_API_URL ?? "";
-
 const CATEGORY_ORDER = [
   "Infrastructure",
   "Geocoding",
@@ -54,6 +53,7 @@ const STATUS_LABELS: Record<string, string> = {
 };
 
 export default function StatusDashboard() {
+  const { apiUrl } = useEnv();
   const [data, setData] = useState<StatusResponse | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -63,15 +63,15 @@ export default function StatusDashboard() {
     setLoading(true);
     setError(null);
     try {
-      const res = await fetch(`${API_URL}/api/status`);
+      const res = await fetch(`${apiUrl}/api/status`);
       if (!res.ok) throw new Error(`HTTP ${res.status}`);
       setData(await res.json());
     } catch (err) {
       setError(err instanceof Error ? err.message : String(err));
     } finally {
       setLoading(false);
     }
-  }, []);
+  }, [apiUrl]);
 
   useEffect(() => {
     fetchStatus();

apps/web/src/components/map/MapCanvas.tsx

@@ -6,12 +6,14 @@ import { useMapStore } from "@openmapx/core";
 import type maplibregl from "maplibre-gl";
 import { useLocale } from "next-intl";
 import { useEffect, useRef } from "react";
+import { useEnv } from "@/lib/EnvProvider";
 import { useMap } from "@/lib/MapContext";
-import { loadOpenMapXStyle, maptilerStyleUrl, STYLE_PROVIDER } from "@/lib/map";
+import { loadOpenMapXStyle, maptilerStyleUrl } from "@/lib/map";
 
 export function MapCanvas() {
   const containerRef = useRef<HTMLDivElement>(null);
   const { mapRef, mapReady, notifyMapReady, notifyStyleReload } = useMap();
+  const env = useEnv();
   const locale = useLocale();
   const { mode, systemMode } = useColorScheme();
   const resolvedMode = mode === "system" ? systemMode : mode;
@@ -36,7 +38,9 @@ export function MapCanvas() {
       if (destroyed || !containerRef.current) return;
 
       const style =
-        STYLE_PROVIDER === "openmapx" ? await loadOpenMapXStyle() : maptilerStyleUrl(mapStyle);
+        env.styleProvider === "openmapx"
+          ? await loadOpenMapXStyle(env)
+          : maptilerStyleUrl(mapStyle, env);
 
       if (destroyed || !containerRef.current) return;
 
@@ -100,7 +104,7 @@ export function MapCanvas() {
       mapRef.current?.remove();
       mapRef.current = null;
     };
-  }, [mapRef, notifyMapReady, setBearing, setCenter, setPitch, setUserLocation, setZoom]);
+  }, [env, mapRef, notifyMapReady, setBearing, setCenter, setPitch, setUserLocation, setZoom]);
 
   // Swap map tile style when dark/light mode changes
   const initialStyleRef = useRef(mapStyle);
@@ -111,17 +115,17 @@ export function MapCanvas() {
     if (mapStyle === initialStyleRef.current) return;
     initialStyleRef.current = mapStyle;
 
-    if (STYLE_PROVIDER === "openmapx") {
-      loadOpenMapXStyle().then((s) => {
+    if (env.styleProvider === "openmapx") {
+      loadOpenMapXStyle(env).then((s) => {
         map.setStyle(s as maplibregl.StyleSpecification);
         map.once("style.load", () => notifyStyleReload());
       });
     } else {
-      const newUrl = maptilerStyleUrl(mapStyle);
+      const newUrl = maptilerStyleUrl(mapStyle, env);
       map.setStyle(newUrl);
       map.once("style.load", () => notifyStyleReload());
     }
-  }, [mapStyle, mapRef, mapReady, notifyStyleReload]);
+  }, [env, mapStyle, mapRef, mapReady, notifyStyleReload]);
 
   // Update map label language when locale changes
   useEffect(() => {

apps/web/src/components/map/StreetViewViewerInner.tsx

@@ -22,12 +22,14 @@ import type { Viewer as MapillaryViewer, ViewerImageEvent } from "mapillary-js";
 import { useLocale, useTranslations } from "next-intl";
 import { useEffect, useRef, useState } from "react";
 import { SearchBar } from "@/components/search/SearchBar";
+import { useEnv } from "@/lib/EnvProvider";
 import { useMap } from "@/lib/MapContext";
 
 export default function StreetViewViewerInner() {
   const t = useTranslations("streetView");
   const tc = useTranslations("common");
   const locale = useLocale();
+  const env = useEnv();
   const activeImageId = useStreetViewStore((s) => s.activeImageId);
   const closeViewer = useStreetViewStore((s) => s.closeViewer);
   const selectedPlace = usePlaceStore((s) => s.selectedPlace);
@@ -85,7 +87,7 @@ export default function StreetViewViewerInner() {
 
   // Initialize viewer once on mount
   useEffect(() => {
-    const token = process.env.NEXT_PUBLIC_MAPILLARY_TOKEN ?? "";
+    const token = env.mapillaryToken;
     const container = containerRef.current;
     if (!container) return;
 
@@ -114,7 +116,7 @@ export default function StreetViewViewerInner() {
       viewerRef.current?.remove();
       viewerRef.current = null;
     };
-  }, []);
+  }, [env.mapillaryToken]);
 
   // Navigate when activeImageId changes after mount
   useEffect(() => {

apps/web/src/components/map/layer-selector/DesktopQuickSelector.tsx

@@ -10,7 +10,7 @@ import Typography from "@mui/material/Typography";
 import { OVERLAY_REGISTRY, toggleOverlay, useCapabilities, useLayerStore } from "@openmapx/core";
 import { useTranslations } from "next-intl";
 import type { MouseEvent } from "react";
-import { TRAFFIC_MIN_ZOOM } from "../layers/trafficConfig";
+import { useEnv } from "@/lib/EnvProvider";
 import { LayerPreviewTile } from "./LayerPreviewTile";
 import { globePreview } from "./layerPreviewSvgs";
 import { BASE_LAYER_OPTIONS, DETAIL_OPTIONS } from "./layerSelectorConfig";
@@ -28,6 +28,7 @@ function DetailOptionTile({
   trafficZoomTooLow: boolean;
 }) {
   const t = useTranslations("layers");
+  const { trafficMinZoom } = useEnv();
   const overlayEntry = option.overlayId
     ? OVERLAY_REGISTRY.find((r) => r.id === option.overlayId)
     : undefined;
@@ -51,7 +52,7 @@ function DetailOptionTile({
       >
         {disabled ? (
           <Typography sx={{ mt: 0.2, fontSize: 9, color: "text.secondary" }}>
-            Zoom {TRAFFIC_MIN_ZOOM}+
+            Zoom {trafficMinZoom}+
           </Typography>
         ) : null}
       </LayerPreviewTile>

apps/web/src/components/map/layer-selector/LayerSelector.tsx

@@ -19,15 +19,16 @@ import {
 import { useTranslations } from "next-intl";
 import type { FocusEvent, MouseEvent } from "react";
 import { useEffect, useRef, useState } from "react";
+import { useEnv } from "@/lib/EnvProvider";
 import { useMap } from "@/lib/MapContext";
-import { TRAFFIC_MIN_ZOOM } from "../layers/trafficConfig";
 import { DesktopMorePanel } from "./DesktopMorePanel";
 import { DesktopQuickSelector } from "./DesktopQuickSelector";
 import { BASE_LAYER_OPTIONS } from "./layerSelectorConfig";
 import { MobileLayerPanel } from "./MobileLayerPanel";
 
 export function LayerSelector() {
   const t = useTranslations("layers");
+  const { trafficMinZoom } = useEnv();
   const theme = useTheme();
   const desktopDock = useMediaQuery(theme.breakpoints.up("sm"));
   const { mapReady, mapRef, styleVersion } = useMap();
@@ -121,7 +122,7 @@ export function LayerSelector() {
   if (hiddenByFloatingCard) return null;
 
   const open = Boolean(anchorEl);
-  const trafficZoomTooLow = zoomLevel !== null && zoomLevel < TRAFFIC_MIN_ZOOM;
+  const trafficZoomTooLow = zoomLevel !== null && zoomLevel < trafficMinZoom;
 
   return (
     <>

apps/web/src/components/map/layers/AirQualityLayer.tsx

@@ -4,6 +4,7 @@ import { useAirQualityStore, useDebouncedCallback, useOverlayExclusion } from "@
 import type { GeoJSONSource, MapLayerMouseEvent } from "maplibre-gl";
 import maplibregl from "maplibre-gl";
 import { useCallback, useEffect, useRef } from "react";
+import { useEnv } from "@/lib/EnvProvider";
 import { escapeHtml, sanitizeUrl } from "@/lib/escapeHtml";
 import { useMap } from "@/lib/MapContext";
 import { getFirstSymbolLayerId } from "./layerStyleUtils";
@@ -81,6 +82,7 @@ function buildGeoJson(stations: AQStation[]) {
 
 export function AirQualityLayer() {
   const { mapRef, mapReady, styleVersion } = useMap();
+  const env = useEnv();
   const layerVisible = useAirQualityStore((s) => s.layerVisible);
   const setLoading = useAirQualityStore((s) => s.setLoading);
   useOverlayExclusion("air-quality", layerVisible);
@@ -93,7 +95,7 @@ export function AirQualityLayer() {
     if (!map) return;
 
     const bounds = map.getBounds();
-    const apiUrl = process.env.NEXT_PUBLIC_API_URL ?? "";
+    const { apiUrl } = env;
     const url = `${apiUrl}/api/air-quality/stations?south=${bounds.getSouth()}&west=${bounds.getWest()}&north=${bounds.getNorth()}&east=${bounds.getEast()}`;
 
     setLoading(true);
@@ -112,7 +114,7 @@ export function AirQualityLayer() {
     } finally {
       setLoading(false);
     }
-  }, [mapRef, setLoading]);
+  }, [env, mapRef, setLoading]);
 
   useEffect(() => {
     void styleVersion;

apps/web/src/components/map/layers/CyclingBaseLayer.tsx

@@ -2,6 +2,7 @@
 
 import { useLayerStore } from "@openmapx/core";
 import { useEffect, useRef, useState } from "react";
+import { useEnv } from "@/lib/EnvProvider";
 import { RasterBaseLayer } from "./RasterBaseLayer";
 
 const CYCLOSM_ATTRIBUTION =
@@ -10,13 +11,9 @@ const CYCLOSM_ATTRIBUTION =
 const THUNDERFOREST_ATTRIBUTION =
   '© <a href="https://www.thunderforest.com/maps/opencyclemap/" target="_blank">Thunderforest OpenCycleMap</a> · © <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors (<a href="https://creativecommons.org/licenses/by-sa/2.0/" target="_blank">CC-BY-SA</a>)';
 
-const tileUrl =
-  process.env.NEXT_PUBLIC_CYCLOSM_TILE_URL_TEMPLATE ||
-  (process.env.NEXT_PUBLIC_API_URL
-    ? `${process.env.NEXT_PUBLIC_API_URL.replace(/\/$/, "")}/api/tiles/cyclosm/{z}/{x}/{y}.png`
-    : "/api/tiles/cyclosm/{z}/{x}/{y}.png");
-
 export function CyclingBaseLayer() {
+  const env = useEnv();
+  const tileUrl = env.cyclOsmTileUrlTemplate;
   const activeLayer = useLayerStore((s) => s.activeLayer);
   const [attribution, setAttribution] = useState(CYCLOSM_ATTRIBUTION);
   const probed = useRef(false);
@@ -35,7 +32,7 @@ export function CyclingBaseLayer() {
         }
       })
       .catch(() => {});
-  }, [activeLayer]);
+  }, [activeLayer, tileUrl]);
 
   return (
     <RasterBaseLayer