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

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 [email protected]: 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.