Next.js Discord

Discord Forum

Call next api route in page.ts throws errors in build

Answered
Havana posted this in #help-forum
Open in Discord
Avatar
HavanaOP
I'm moving a production app from the pages directory to the new app directory. In the old code I used getServersideProps to fetch data from an api route defined in /pages/api. When moving this to the new page file in the app dir, I get an error when building this in AWS codepipeline.

I've read that it's not recommended to call api routes on the server side of next, but we are using the api routes as a BFF, which means we're calling external api's and are mapping the data to the need of the front end.

Are there any solutions to this? When running next build locally, I don't get any errors. But running the same build command in the pipeline throws the error seen in the screenshot attached. I have tried to comment out the lines where we fetch the data and I get no errors than, so I guess that's the problem?

TypeError: fetch failed
at Object.fetch (/codebuild/output/src1940751251/src/code/src/node_modules/next/dist/compiled/undici/index.js:1:26669)
at processTicksAndRejections (node:internal/process/task_queues:96:5) {
cause: Error: connect ECONNREFUSED 127.0.0.1:3000
at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1278:16)
at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
errno: -111,
code: 'ECONNREFUSED',
syscall: 'connect',
address: '127.0.0.1',
port: 3000
}
}

Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: fetch failed
at Object.fetch (/codebuild/output/src1940751251/src/code/src/node_modules/next/dist/compiled/undici/index.js:1:26669)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
- info Generating static pages (5/7)
- info Generating static pages (7/7)

Export encountered errors on following paths:
/page: /
Answered by joulev
just move the logic of your route handler/api route to the server component directly https://nextjs-discord-common-questions.joulev.dev/fetching-own-api-endpoint-in-react-server-components
View full answer

8 Replies

Avatar
joulev
just move the logic of your route handler/api route to the server component directly https://nextjs-discord-common-questions.joulev.dev/fetching-own-api-endpoint-in-react-server-components
Answer
Avatar
HavanaOP
It feels a bit off to do that. What if another page also needs the data that is fetched there. Than you have to maintain that code in multiple places? The same counts for the separation of concerns. It feels like the only responsibility of a React component should be the rendering, not the mapping of the data. I might be wrong but it feels like everything should go into the components and that makes the code less maintainable
Avatar
joulev
Than you have to maintain that code in multiple places
abstract the logic to a function then import the function in both places
idk how wrong calling server-side logic inside your server looks to you, but your server requesting itself is definitely not right
for reasons i explained pretty long in the linked document, i won't be reproducing them here
Avatar
HavanaOP
do I get it right that the route handlers are not really suited to serve as a BFF than? It feels like you only use them for client side logic as you explained in the article.
Avatar
joulev
route handlers are fine for any purposes that api routes used to do and is a one-to-one replacement of api routes. in the first place fetching your api routes inside getServerSideProps was never the correct way. you can abstract the logic to a server-side function and use it in both the server component and the route handler. just don't fetch the route handler inside your server component
Avatar
HavanaOP
ok, thanks for the proper explanation!