I have an API which gets records from Mongodb. When I call records from db, records are coming, there is no problem. But it's not working on the host. There is an error on console like Failed to load resource: the server responded with a status of 404 () api/improve-language?cat=general:1.
My codes where I'm trying to get datas:
useEffect(() => {
getAllData(category)
}, [])
async function getAllData(cat){
if(cat){
cat = `?cat=${cat}`
} else{
cat = ``
}
axios
.get(`/api/improve-language${cat}`)
.then(res => {
setAllWords(res.data)
setNeverAskedWords(res.data)
newQuestionAndAnswers(res.data)
})
.catch(err =>{
console.log(err)
})
}
The 404 error means the address is wrong.
Probably your REST API and Next JS client are running on different addresses.
Can you call your GET endpoint with the exact address like http://localhost:3000/api/improve-language?
PS. for production-ready apps it will be better to pass the API address by env variable, so you will be able to change it dynamically.