Vercel / Next.js - 预渲染页面“/”时发生错误- 部署问题

Question

我想知道您是否可以帮助我 - 我一直在遵循教程，一切都很顺利，直到我尝试在 Vercel 上部署。基本上，它向我显示了这个错误：

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

这是我运行 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)

这是 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;

页面：

Answer 1

维塞尔无法到达

fetchApi(${baseUrl}/properties/list?locationExternalIDs=5002& Purpose=for->sale&hitsPerPage=6)

验证您正在调用的 API 是否可以从本地计算机外部访问。