Next.js Discord

Discord Forum

"Failed to fetch data" when deploying on Vercel

Unanswered
Netherland Dwarf posted this in #help-forum
Open in Discord
Netherland DwarfOP
Hello,

This is the first time I play with Nextjs, to create a static website.
So far, everything was working fine in local during the developement. But when I tried to deploy it on Vercel, it runs to an error on the fetch() method.

It should be a silly question and a dummy error from me, but eh. I tried to read again and again the doc but there is so much possibility, it's like finding a needle ^^.

Here is my project architecture:
-- app
--- pageA
---- page.tsx (I do fetch here)
--- pageB
---- page.tsx
--- page.tsx (I do fetch in here)
--- api
---- pageA
----- route.tsx (My function are here)
-- components
--- compA

Does something is wrong somewhere?

Thanks 👋

39 Replies

Ray
you can't fetch the route handler at build time
just fetch data in the server component instead
Netherland DwarfOP
The components in the page.tsx are not server component by default?
I'll need to wrap everything related to those data in a component and do the fetches in those components?
Rhinelander
If the application is working perfectly on the development phase, I strongly advise you upload the file and send us the repository/screenshots so we can figure out the cause of the error in fetching the data
because the endpoint won't be available at build time
you should move the db operation(or anything you do inside the route handler) to the server component instead
Netherland DwarfOP
I moved everything in components, but it still triggers the error.
Here is the repo: https://github.com/Neewd/adaozan, can you spot what's wrong in here?
Ray
what error you got?
here is still fetching the route handler
you dont need those apis there, just import it to the server component
Netherland DwarfOP
just import the data.ts directly
Netherland DwarfOP
But what if the call was more complex? Is it really the way to go?
It means I can not call any router anywhere? ^^
you mean you need to access the api later?
you can still leave the apis there but keep in mind that it won't be available at build time
Netherland DwarfOP
So I won't be able to deploy it on Vercel?
Ray
well yes if you fetching the api at build time
you will get the fetch data error and unable to deploy
not just vercel, you cannot build locally also
Netherland DwarfOP
But where I need to move the fetch in order to gete Next understand that's it's not necessary to do it on build time?
Because it's not a"strange" pattern to want to use an internal API like this, is it? ^^
Ray
since your route handler are just return the imported data
you can just import those into the component
Netherland DwarfOP
Yes I understand the fix I could do, but I want to understand what is the really pattern to apply if on another project i need a more complex API 😄
Ray
when you can just import it directly, why would you want to create another layer for it
Netherland DwarfOP
To be honest, i created the layer and afterwards I've put the data ^^
Ray
do the data layer inside the server component
is what the doc say
take a look
Netherland DwarfOP
Oh interesting, didn't know the existance of this doc