I have a nextjs
app that I have pushed to production using vercel
.I have an API route that gets some data from my cms using getServerSideProps
with axios
.The problem is that when I try to load the data to my page suddenly on localhost I get the error Error: connect ECONNREFUSED 127.0.0.1:80
which I think has to do with the baseURL
axios uses.However I want this baseURL different in production of course so it will not target localhost.
My axios config
export let UserClient = axios.create({
method: "POST",
timeout: 30 * 1000,
withCredentials: true,
});
my request to target nextjs api route
import { UserClient } from "@/network/clients";
export default async function viewJobs(comp) {
const { data } = await UserClient({
url:"/api/getJobs",
data: {
company_name:comp
},
});
return data;
}
if I change the url in my request to the api route to
const { data } = await UserClient({
url:"http://localhost:3000/api/getJobs",
data: {
company_name:comp
},
});
it works perfectly on localhost but obviously not in production.
This is my first time doing this so how can solve this and change the url depending on the environment ? I would appreciate your help.You can ask me if you need more info