I have a file : /app/api/api.ts
In this file I have all the functions for communicating with the backend (backend is external)
The api.ts file looks like this :

const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL
import { signOut, getSession } from 'next-auth/react'
import { OrderData, SellerRequestStatus } from '@/types/types';


async function refreshAndRetry(token: string, url: string, options: RequestInit) {
  const session = await getSession();
  if (session?.accessToken && session.accessToken !== token) {
    const response = await fetch(url, {
      ...options,
      headers: {
        ...options.headers,
        'Authorization': `Bearer ${session.accessToken}`,
      },
    });
    return response;
  }
  signOut();
  throw new Error('Session expired');
}




export async function updateUserAddress(
...
) {
  let response = await fetch(`${API_BASE_URL}/userProfile/update_address/${addressId}`, {
    method: "PUT",
    headers: {
      Authorization: `Bearer ${token}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify(addressData),
  })

  if (response.status === 401) {
    response = await refreshAndRetry(token, `${API_BASE_URL}/userProfile/update_address/${addressId}`, {
      method: "PUT",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(addressData),
    })
  }
...
}

export async function loginUser(phone: string) {
  const response = await fetch(`${API_BASE_URL}/auth/login`, {
...

I just noticed that I can see this whole file in sources on the browser, my mistake that I had to check this out before starting the whole project but now the project is almost done.


Can I secure this with just adding a "use server" on top of this file? I mean making it inaccessible on browser
Also I import these functions on client side pages almost every single part of my site
Like

"use client"
import { getStoreMoney } from "@/app/api/api"

What should I do?