Vercel / Next.js - Error occurred prerendering page "/" - Deployment issue - next.js

Question

I wonder if you can help me - I have been following a tutorial and everything was going okay until I tried to deploy on Vercel. Basically, it shows this error at me:
Cloning completed: 625.351ms
Analyzing source code...
Installing build runtime...
Build runtime installed: 2.594s
No Build Cache available
Installing dependencies...
Detected `package-lock.json` generated by npm 7...
npm WARN deprecated next-google-fonts#2.2.0: As of Next.js 10.2, Google Fonts are automatically optimized! For more info, see https://github.com/joe-bell/next-google-fonts
added 475 packages in 17s
70 packages are looking for funding
run `npm fund` for details
Detected Next.js version: 12.0.9
Detected `package-lock.json` generated by npm 7...
Running "npm run build"
> build
> next build
Attention: Next.js now collects completely anonymous telemetry regarding usage.
This information is used to shape Next.js' roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://nextjs.org/telemetry
info - Checking validity of types...
info - Creating an optimized production build...
info - Disabled SWC as replacement for Babel because of custom Babel configuration ".babelrc" https://nextjs.org/docs/messages/swc-disabled
info - Using external babel configuration from /vercel/path0/.babelrc
info - Compiled successfully
info - Collecting page data...
info - Generating static pages (0/3)
Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
Error: Request failed with status code 400
at settle (/vercel/path0/node_modules/axios/lib/core/settle.js:17:12)
at IncomingMessage.handleStreamEnd (/vercel/path0/node_modules/axios/lib/adapters/http.js:312:11)
at IncomingMessage.emit (events.js:412:35)
at endReadableNT (internal/streams/readable.js:1334:12)
at processTicksAndRejections (internal/process/task_queues.js:82:21)
info - Generating static pages (3/3)
> Build error occurred
Error: Export encountered errors on following paths:
/
at /vercel/path0/node_modules/next/dist/export/index.js:499:19
at processTicksAndRejections (internal/process/task_queues.js:95:5)
at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/trace/trace.js:75:20)
at async /vercel/path0/node_modules/next/dist/build/index.js:1005:17
at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/trace/trace.js:75:20)
at async /vercel/path0/node_modules/next/dist/build/index.js:879:13
at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/trace/trace.js:75:20)
at async Object.build [as default] (/vercel/path0/node_modules/next/dist/build/index.js:82:25)
Error: Command "npm run build" exited with 1
Here is what happens when I run, npm run build :
info - Checking validity of types
info - Disabled SWC as replacement for Babel because of custom Babel configuration ".babelrc" https://nextjs.org/docs/messages/swc-disabled
info - Using external babel configuration from /Users/musa/Dev/projects/real-estate-app/.babelrc
info - Creating an optimized production build
info - Compiled successfully
info - Collecting page data
info - Generating static pages (3/3)
info - Finalizing page optimization
Page Size First Load JS
┌ ● / (5492 ms) 1.91 kB 195 kB
├ /_app 0 B 186 kB
├ ○ /404 1.36 kB 187 kB
├ λ /api/hello 0 B 186 kB
├ λ /property/[id] 7.08 kB 201 kB
└ λ /search 5.34 kB 199 kB
+ First Load JS shared by all 186 kB
├ chunks/framework-91d7f78b5b4003c8.js 42 kB
├ chunks/main-629582258d0e4696.js 24.9 kB
├ chunks/pages/_app-ce65d5b2019d69ca.js 118 kB
└ chunks/webpack-3afb6060a90456f3.js 1.53 kB
λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps)
○ (Static) automatically rendered as static HTML (uses no initial props)
● (SSG) automatically generated as static HTML + JSON (uses getStaticProps)
Here is the index.js:
import { Box, Flex } from "#chakra-ui/react";
import Banner from "../components/Banner";
import Property from "../components/Property";
import { baseUrl, fetchApi } from "../utils/fetchApi";
const Home = ({ propertiesForSale, propertiesForRent }) => (
<Box>
<Banner
purpose="Rent a Home"
title1="Rental Homes for"
title2="Everyone"
desc1="Explore Apartments, Villas, Homes"
desc2="and more"
buttonText="Explore Renting"
linkName="/search?purpose=for-rent"
imageUrl="https://bayut-production.s3.eu-central-1.amazonaws.com/image/145426814/33973352624c48628e41f2ec460faba4"
/>
<Flex flexWrap="wrap" justifyContent="center" alignItems="center">
{propertiesForRent.map((property) => (
<Property property={property} key={property.id} />
))}
</Flex>
<Banner
purpose="BUY A HOME"
title1=" Find, Buy & Own Your"
title2="Dream Home"
desc1=" Explore from Apartments, land, builder floors,"
desc2=" villas and more"
buttonText="Explore Buying"
linkName="/search?purpose=for-sale"
imageUrl="https://bayut-production.s3.eu-central-1.amazonaws.com/image/110993385/6a070e8e1bae4f7d8c1429bc303d2008"
/>
<Flex flexWrap="wrap" justifyContent="center" alignItems="center">
{propertiesForSale.map((property) => (
<Property property={property} key={property.id} />
))}
</Flex>
</Box>
);
export async function getStaticProps() {
const propertyForSale = await fetchApi(
`${baseUrl}/properties/list?locationExternalIDs=5002&purpose=for-sale&hitsPerPage=6`
);
const propertyForRent = await fetchApi(
`${baseUrl}/properties/list?locationExternalIDs=5002&purpose=for-rent&hitsPerPage=6`
);
return {
props: {
propertiesForSale: propertyForSale?.hits,
propertiesForRent: propertyForRent?.hits,
},
};
}
export default Home;
Pages:
📦pages
┣ 📂api
┃ ┗ 📜hello.js
┣ 📂property
┃ ┗ 📜[id].js
┣ 📜_app.js
┣ 📜_document.js
┣ 📜index.js
┗ 📜search.js
Already went to this link:
https://nextjs.org/docs/messages/prerender-error#possible-ways-to-fix-it
Thank you in Advance :D

Answer 1

Vercel cannot reach
fetchApi(${baseUrl}/properties/list?locationExternalIDs=5002&purpose=for->sale&hitsPerPage=6)
Verify that the API you are calling is reachable from outside of your local machine.