In my current Next.js project, I am utilizing next/headers to dynamically set a baseUrl for calls to my API.
const baseUrl = () => {
const protocol = process?.env.NODE_ENV === "development" ? "http" : "https";
const host = headers().get("host");
const baseUrl = `${protocol}://${host}`;
return baseUrl;
}
export const fetchUser = async () => {
try {
console.log(`${baseUrl()}/api/getUser`);
const response = await fetch(`${baseUrl()}/api/aps/getUser`, { method: 'GET', headers: headers() });
const data = await response.json();
return data.data;
} catch (error) {
console.error("Error fetching user:", error);
}
};
Everything is functioning correctly on my end, headers().get("host") is returning localhost:3000 as intended.
However, another developer working on this project locally is seeing a different value instead of localhost:3000. They are getting [::1]:59982, with the port number changing each time.
I am confused about where this alternate value is originating from. Any insights?