Add Next.js rewrites for API proxy to fix /auth/login routing

Co-authored-by: johndoe6345789 <224850594+johndoe6345789@users.noreply.github.com>

docker-compose.yml

@@ -24,7 +24,8 @@ services:
     ports:
       - "3000:3000"
     environment:
-      - NEXT_PUBLIC_API_URL=http://backend:5000
+      - NEXT_PUBLIC_API_URL=
+      - BACKEND_URL=http://backend:5000
       - NODE_ENV=production
     depends_on:
       - backend

frontend/next.config.js

@@ -1,6 +1,25 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   output: 'standalone',
+  async rewrites() {
+    // Get backend URL from environment, fallback to localhost for development
+    const backendUrl = process.env.BACKEND_URL || 'http://backend:5000';
+    
+    return [
+      {
+        source: '/api/:path*',
+        destination: `${backendUrl}/:path*`,
+      },
+      {
+        source: '/auth/:path*',
+        destination: `${backendUrl}/auth/:path*`,
+      },
+      {
+        source: '/v1/:path*',
+        destination: `${backendUrl}/v1/:path*`,
+      },
+    ];
+  },
 }
 
 module.exports = nextConfig

frontend/src/utils/api.js

@@ -9,8 +9,8 @@
  * For production deployments, it's strongly recommended to set NEXT_PUBLIC_API_URL.
  * 
  * Common deployment patterns:
- * - Single domain with reverse proxy: Set NEXT_PUBLIC_API_URL="" or "/api" 
- *   (if backend is served under /api path)
+ * - Single domain with Next.js rewrites: Set NEXT_PUBLIC_API_URL="" (empty string)
+ *   Backend routes (/auth/*, /v1/*) will be proxied by Next.js to the backend
  * - Separate subdomains: Set NEXT_PUBLIC_API_URL=https://api.example.com
  * - CapRover/separate apps: Set NEXT_PUBLIC_API_URL=https://backend-app.your-domain.com
  * - Same host, different port: Will auto-detect if frontend is on non-standard port
@@ -18,16 +18,13 @@
  * When NEXT_PUBLIC_API_URL is not set:
  * - For localhost: defaults to http://localhost:5000 (standard backend dev port)
  * - For deployed sites on custom port: tries backend on port 5000 (uncommon but supported)
- * - For deployed sites on standard ports: assumes same-origin (works with reverse proxy)
- * 
- * Note: The auto-detection logic assumes the backend is accessible without a path prefix.
- * If your backend is served under /api or another path, you MUST set NEXT_PUBLIC_API_URL.
+ * - For deployed sites on standard ports: returns empty string to use Next.js rewrites
  * 
  * @returns {string} The API base URL
  */
 export function getApiUrl() {
   // Check for environment variable first (preferred for production)
-  if (process.env.NEXT_PUBLIC_API_URL) {
+  if (process.env.NEXT_PUBLIC_API_URL !== undefined) {
     return process.env.NEXT_PUBLIC_API_URL;
   }
   
@@ -44,10 +41,10 @@ export function getApiUrl() {
         return `${protocol}//${hostname}:5000`;
       }
       
-      // Pattern 2: Same origin (works with reverse proxy routing)
-      // This assumes backend is on the same host/port as frontend
-      // Common with nginx/traefik routing different paths to different services
-      return `${protocol}//${hostname}`;
+      // Pattern 2: Same origin with Next.js rewrites
+      // Return empty string to use relative URLs, which will be handled by Next.js rewrites
+      // This works when backend routes are proxied through Next.js
+      return '';
     }
     
     // For localhost development, backend is typically on port 5000