From 83eddf89cddd33cc45797b085320e7c54f65d5db Mon Sep 17 00:00:00 2001
From: cdricms <36056008+cdricms@users.noreply.github.com>
Date: Sat, 21 Mar 2026 11:53:25 +0100
Subject: [PATCH] Some tweaks

---
 frontend/hooks/use-file-upload.tsx |  5 +++--
 frontend/lib/getMe.ts              |  3 ++-
 frontend/lib/request.ts            |  5 +++--
 frontend/next.config.ts            | 32 +++++-------------------------
 frontend/utils/api.ts              |  9 +++++++++
 5 files changed, 22 insertions(+), 32 deletions(-)
 create mode 100644 frontend/utils/api.ts

diff --git a/frontend/hooks/use-file-upload.tsx b/frontend/hooks/use-file-upload.tsx
index 90860d3..72e221d 100644
--- a/frontend/hooks/use-file-upload.tsx
+++ b/frontend/hooks/use-file-upload.tsx
@@ -1,6 +1,7 @@
 "use client";
 import { API_URL } from "@/lib/constants";
 import { ApiResponse } from "@/types/types";
+import { getApiUrl } from "@/utils/api";
 import { getCookie } from "cookies-next";
 import { useState, useRef, useCallback } from "react";
 
@@ -24,7 +25,7 @@ const useFileUpload = (): UseFileUploadReturn => {
 
 	const uploadFile = useCallback(
 		(file: File, url: string, onSuccess?: (response: any) => void) => {
-			url = `${API_URL}${url}`;
+			url = `${getApiUrl()}${url}`;
 			if (!file || !url) {
 				setError("File and upload URL are required.");
 				return;
@@ -35,7 +36,7 @@ const useFileUpload = (): UseFileUploadReturn => {
 				return;
 			}
 
-			fetch(`${API_URL}/media/verify`, {
+			fetch(`${getApiUrl()}/media/verify`, {
 				method: "POST",
 				body: JSON.stringify({
 					name: file.name,
diff --git a/frontend/lib/getMe.ts b/frontend/lib/getMe.ts
index fa7e04e..0246f51 100644
--- a/frontend/lib/getMe.ts
+++ b/frontend/lib/getMe.ts
@@ -3,6 +3,7 @@ import { API_URL } from "./constants";
 import { ApiResponse } from "@/types/types";
 import IUser from "@/interfaces/IUser";
 import { cookies } from "next/headers";
+import { getApiUrl } from "@/utils/api";
 
 const getMe = cache(
 	async (sessionCookie?: string): Promise<ApiResponse<IUser> | null> => {
@@ -12,7 +13,7 @@ const getMe = cache(
 			if (!token) return null;
 			sessionCookie = token;
 		}
-		const res = await fetch(`${API_URL}/users/me`, {
+		const res = await fetch(`${getApiUrl()}/users/me`, {
 			headers: { Authorization: `Bearer ${sessionCookie}` },
 		});
 		return await res.json();
diff --git a/frontend/lib/request.ts b/frontend/lib/request.ts
index 1c310d6..a3274e5 100644
--- a/frontend/lib/request.ts
+++ b/frontend/lib/request.ts
@@ -1,5 +1,6 @@
 import { API_URL } from "@/lib/constants";
 import { ApiResponse } from "@/types/types";
+import { getApiUrl } from "@/utils/api";
 import { getCookie } from "cookies-next";
 import { ReadonlyRequestCookies } from "next/dist/server/web/spec-extension/adapters/request-cookies";
 export default async function request<T>(
@@ -20,7 +21,7 @@ export default async function request<T>(
 
 	if (options.csrfToken) {
 		const res: ApiResponse<{ csrf: string }> = await (
-			await fetch(`${API_URL}/csrf-token`, { credentials: "include" })
+			await fetch(`${getApiUrl()}/csrf-token`, { credentials: "include" })
 		).json();
 		if (res.data) headers["X-CSRF-Token"] = res.data.csrf;
 	}
@@ -39,7 +40,7 @@ export default async function request<T>(
 		headers.Authorization = `Bearer ${authToken}`;
 	}
 
-	const response = await fetch(`${API_URL}${endpoint}`, {
+	const response = await fetch(`${getApiUrl()}${endpoint}`, {
 		method,
 		headers,
 		body: body ? JSON.stringify(body) : undefined,
diff --git a/frontend/next.config.ts b/frontend/next.config.ts
index fe6fed5..e70d755 100644
--- a/frontend/next.config.ts
+++ b/frontend/next.config.ts
@@ -1,41 +1,19 @@
 import type { NextConfig } from "next";
 
-const apiUrl =
-	process.env.NODE_ENV !== "production"
-		? `http://localhost:${process.env.BACKEND_PORT ?? 3001}`
-		: `https://${process.env.SERVER_NAME}/api`;
-
 const nextConfig: NextConfig = {
-	/* config options here */
-	transpilePackages: ['@mdxeditor/editor'], 
+	transpilePackages: ["@mdxeditor/editor"],
 	output: "standalone",
 	compiler: {
 		removeConsole: process.env.NODE_ENV === "production",
 	},
 	images: {
 		remotePatterns: [
-			{
-				protocol: "https",
-				hostname: "img.youtube.com",
-			},
-			{
-				protocol: "https",
-				hostname: "avatar.vercel.sh",
-			},
-			{
-				protocol: "http",
-				hostname: "localhost",
-			},
-			{
-				protocol: "https",
-				hostname: "latosa.cems.dev",
-			},
+			{ protocol: "https", hostname: "img.youtube.com" },
+			{ protocol: "https", hostname: "avatar.vercel.sh" },
+			{ protocol: "http", hostname: "localhost" },
+			{ protocol: "https", hostname: "latosa.cems.dev" },
 		],
 	},
-	env: {
-		NEXT_PUBLIC_BACKEND_PORT: process.env.BACKEND_PORT,
-		NEXT_PUBLIC_API_URL: apiUrl,
-	},
 };
 
 export default nextConfig;
diff --git a/frontend/utils/api.ts b/frontend/utils/api.ts
new file mode 100644
index 0000000..5d92d2e
--- /dev/null
+++ b/frontend/utils/api.ts
@@ -0,0 +1,9 @@
+export const getApiUrl = () => {
+	// If window is undefined, we are running on the server (SSR in Docker)
+	if (typeof window === "undefined") {
+		return process.env.INTERNAL_API_URL || "http://latosa-backend:4001";
+	}
+
+	// Otherwise, we are running in the user's browser
+	return process.env.NEXT_PUBLIC_API_URL;
+};