feat: proxy backend API through Next.js using runtime BACKEND_URL

Previously, NEXT_PUBLIC_API_URL was a build-time Next.js variable, making
it impossible to configure the backend URL in docker-compose `environment`
without rebuilding the image.

This change introduces a proper server-side proxy:
- next.config.ts: adds a rewrite rule that forwards all /api/* requests
  to BACKEND_URL (read at server startup, not baked at build time).
  Defaults to http://localhost:8000 so local dev works without config.
- api.ts: API_BASE is now an empty string — all fetch calls use relative
  /api/... paths, which the Next.js server proxies to the backend.
- docker-compose.yml: replaces NEXT_PUBLIC_API_URL build arg with a
  runtime BACKEND_URL env var defaulting to http://backend:8000, using
  Docker's internal networking. Port 8000 no longer needs to be exposed.
- README: updates Docker setup docs, standalone compose example, and
  environment variable reference to reflect BACKEND_URL.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/app/api/[...path]/route.ts

@@ -0,0 +1,83 @@
+/**
+ * Catch-all proxy route — forwards /api/* requests from the browser to the
+ * backend server. BACKEND_URL is a plain server-side env var (not NEXT_PUBLIC_),
+ * so it is read at request time from the runtime environment, never baked into
+ * the client bundle or the build manifest.
+ *
+ * Set BACKEND_URL in docker-compose `environment:` (e.g. http://backend:8000)
+ * to use Docker internal networking. Defaults to http://localhost:8000 for
+ * local development where both services run on the same host.
+ */
+
+import { NextRequest, NextResponse } from "next/server";
+
+// Hop-by-hop headers that must not be forwarded to the backend.
+const HOP_BY_HOP = new Set([
+  "connection",
+  "keep-alive",
+  "proxy-authenticate",
+  "proxy-authorization",
+  "te",
+  "trailers",
+  "transfer-encoding",
+  "upgrade",
+  "host",
+]);
+
+async function proxy(req: NextRequest, path: string[]): Promise<NextResponse> {
+  const backendUrl = process.env.BACKEND_URL ?? "http://localhost:8000";
+  const targetUrl = new URL(`/api/${path.join("/")}`, backendUrl);
+  targetUrl.search = req.nextUrl.search;
+
+  // Forward relevant request headers (strip hop-by-hop)
+  const forwardHeaders = new Headers();
+  req.headers.forEach((value, key) => {
+    if (!HOP_BY_HOP.has(key.toLowerCase())) {
+      forwardHeaders.set(key, value);
+    }
+  });
+
+  const isBodyless = req.method === "GET" || req.method === "HEAD";
+  const upstream = await fetch(targetUrl.toString(), {
+    method: req.method,
+    headers: forwardHeaders,
+    body: isBodyless ? undefined : req.body,
+    // Required for streaming request bodies in Node.js fetch
+    // @ts-ignore
+    duplex: "half",
+  });
+
+  // Forward response headers (strip hop-by-hop)
+  const responseHeaders = new Headers();
+  upstream.headers.forEach((value, key) => {
+    if (!HOP_BY_HOP.has(key.toLowerCase())) {
+      responseHeaders.set(key, value);
+    }
+  });
+
+  // 304 responses must have no body
+  if (upstream.status === 304) {
+    return new NextResponse(null, { status: 304, headers: responseHeaders });
+  }
+
+  return new NextResponse(upstream.body, {
+    status: upstream.status,
+    headers: responseHeaders,
+  });
+}
+
+export async function GET(req: NextRequest, { params }: { params: Promise<{ path: string[] }> }) {
+  return proxy(req, (await params).path);
+}
+
+export async function POST(req: NextRequest, { params }: { params: Promise<{ path: string[] }> }) {
+  return proxy(req, (await params).path);
+}
+
+export async function PUT(req: NextRequest, { params }: { params: Promise<{ path: string[] }> }) {
+  return proxy(req, (await params).path);
+}
+
+export async function DELETE(req: NextRequest, { params }: { params: Promise<{ path: string[] }> }) {
+  return proxy(req, (await params).path);
+}

frontend/src/app/page.tsx

@@ -592,7 +592,7 @@ export default function Dashboard() {
       {backendStatus === 'disconnected' && (
         <div className="absolute top-0 left-0 right-0 z-[9000] flex items-center justify-center py-2 bg-red-950/90 border-b border-red-500/40 backdrop-blur-sm">
           <span className="text-[10px] font-mono tracking-widest text-red-400">
-            BACKEND OFFLINE — Cannot reach {API_BASE}. Start the backend server or check your connection.
+            BACKEND OFFLINE — Cannot reach backend server. Check that the backend container is running and BACKEND_URL is correct.
           </span>
         </div>
       )}

frontend/src/lib/api.ts

@@ -1,28 +1,7 @@
-// NEXT_PUBLIC_* vars are baked at build time in Next.js, so setting them
-// in docker-compose `environment` has no effect at runtime.  Instead we
-// auto-detect: use the browser's current hostname with a configurable port
-// so the dashboard works on localhost, LAN IPs, and custom Docker port maps
-// without any code changes.
-//
-// Override order:
-//   1. Build-time NEXT_PUBLIC_API_URL (for advanced users who rebuild the image)
-//   2. Runtime auto-detect from window.location.hostname + port 8000
-
-function resolveApiBase(): string {
-  // Build-time override (works when image is rebuilt with the env var)
-  if (process.env.NEXT_PUBLIC_API_URL) {
-    return process.env.NEXT_PUBLIC_API_URL;
-  }
-
-  // Server-side rendering: fall back to localhost
-  if (typeof window === "undefined") {
-    return "http://localhost:8000";
-  }
-
-  // Client-side: use the same hostname the user is browsing on
-  const proto = window.location.protocol;
-  const host = window.location.hostname;
-  return `${proto}//${host}:8000`;
-}
-
-export const API_BASE = resolveApiBase();
+// All API calls use relative paths (e.g. /api/flights).
+// Next.js rewrites them at the server level to BACKEND_URL (set in docker-compose
+// or .env.local for dev). This means:
+//   - No build-time baking of the backend URL into the client bundle
+//   - BACKEND_URL=http://backend:8000 works via Docker internal networking
+//   - Only port 3000 needs to be exposed externally
+export const API_BASE = "";