How to call external api inside of next js?
Unanswered
White-chinned Petrel posted this in #help-forum
White-chinned PetrelOP
For Next Js, I'm a little confused how to call and api thats built using a different backend in my case flask. Do you just call them using the regular fetch api or axios? Or should I make making api folder and mak an api route (like register.ts), and inside that api route i put the logic to reach out to my flask api?
I have tried that I just mentioned and all I get is a 404 not found, I'm using Next 14 and the app router, everything I find online seems to show how to do what I want to achieve using the pages router, are there any resources out there for app router?
I have tried that I just mentioned and all I get is a 404 not found, I'm using Next 14 and the app router, everything I find online seems to show how to do what I want to achieve using the pages router, are there any resources out there for app router?
9 Replies
Sun bear
Hi, you can simply use fetch like for every other api.
404 means the route was not found. Did you use the full path and is that path really existing?
404 means the route was not found. Did you use the full path and is that path really existing?
@Sun bear Hi, you can simply use fetch like for every other api.
404 means the route was not found. Did you use the full path and is that path really existing?
White-chinned PetrelOP
I ended up figuring it out I was making an api route but I wasn’t calling the path correctly. Or forming the function right. I didn’t know the function needed to be called POST But I realize that this is overkill I just can call the endpoint directly. But If I needed to call an endpoint where I wanted the data to be server side rendered then I would do that in side of this api route? So then next js can render the data on the server and seo can pick it up?
@White-chinned Petrel I ended up figuring it out I was making an api route but I wasn’t calling the path correctly. Or forming the function right. I didn’t know the function needed to be called POST But I realize that this is overkill I just can call the endpoint directly. But If I needed to call an endpoint where I wanted the data to be server side rendered then I would do that in side of this api route? So then next js can render the data on the server and seo can pick it up?
Sun bear
Yes like that our you can use server actions and then fetch the data in a server component
@Sun bear Yes like that our you can use server actions and then fetch the data in a server component
White-chinned PetrelOP
I read server actions arent stable, is that true or would be it oaky to use them?
@White-chinned Petrel I read server actions arent stable, is that true or would be it oaky to use them?
Sun bear
Never heard of that and am using them often 😅
In theory they are post requests so not really made to only fetch data but many use it for data fetching as well
In theory they are post requests so not really made to only fetch data but many use it for data fetching as well
@Sun bear Never heard of that and am using them often 😅
In theory they are post requests so not really made to only fetch data but many use it for data fetching as well
White-chinned PetrelOP
Gotcha, a login/register function wouldnt make sense to use as a server action though correct? I should perfrom server actions if i want some data from my flask api to be SSR'd or if I didn't have an external API ?
@White-chinned Petrel Gotcha, a login/register function wouldnt make sense to use as a server action though correct? I should perfrom server actions if i want some data from my flask api to be SSR'd or if I didn't have an external API ?
Sun bear
In theory you can use a server action for almost everything you could also do in an api route.
Its more or less an (from my opinion) easier to handle api call.
So you can create a server action
Its more or less an (from my opinion) easier to handle api call.
So you can create a server action
login or an api route api/login/route.ts and get more or less the same resultFor fetching data from your flask api you could fetch inside the conponent
export default function Page() {
// fetch your flask api
const data = await fetch...
return (
<>hello {data.name}</>
)
}White-chinned PetrelOP
Gotcha thanks 😄