简体   繁体   English

在 Next JS 中预呈现页面时发生错误

[英]Error occurred prerendering page in Next JS

I created an API in next JS (in the pages\/api<\/code> folder) and I used it on a page in the pages<\/code> folder.我在下一个 JS 中(在pages\/api<\/code>文件夹中)创建了一个 API,并在pages<\/code>文件夹中的页面上使用了它。

When I run on the localhost (development stage), the API can be called correctly.当我在 localhost(开发阶段)上运行时,可以正确调用 API。 But when I deploy to Vercel there is an error during build.但是当我部署到 Vercel 时,在构建过程中会出现错误。

在 vercel 处构建错误<\/a>

This is my code when i call the API which is in the pages\/api<\/code> folder这是我调用pages\/api<\/code>文件夹中的 API 时的代码

export const getStaticProps = async () => {
  const baseUrlDribble = 'https://api.dribbble.com/v2';
  const baseUrl = process.env.NODE_ENV === 'production' ?
    'https://jovanka-samudra.vercel.app/api' : 'http://localhost:3000/api';

  const resShots = await fetch(`${baseUrlDribble}/user/shots?access_token=${process.env.TOKEN_DRIBBLE}&page=1&per_page=9`);
  const shots = await resShots.json();

  const resResult = await fetch(`${baseUrl}/projects`);
  const result = await resResult.json();
  const projects = result.data.projects;

  return {
    props: {
      shots,
      projects,
    },
    revalidate: 1,
  }
}

You should not fetch an internal API route from getStaticProps — instead, you can write the fetch code in API route directly in getStaticProps.您不应该从 getStaticProps 获取内部 API 路由 - 相反,您可以直接在 getStaticProps 中编写 API 路由中的获取代码。

https:\/\/nextjs.org\/docs\/basic-features\/data-fetching#write-server-side-code-directly<\/a> https:\/\/nextjs.org\/docs\/basic-features\/data-fetching#write-server-side-code-directly<\/a>

"

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 预呈现页面“/”时发生错误。 部署错误 Vercel | Next.js - Error occurred prerendering page "/". Deployment Error Vercel | Next.js Next.js &#39;在预渲染页面“/”时发生错误:错误:缩小反应错误 #321;&#39; 在生产构建期间 - Next.js 'Error occurred prerendering page "/": Error: Minified React error #321;' during production build 预渲染页面“/404”时出错:TypeError: res.writeHead is not a function - Next Js - Error occurred prerendering page "/404" : TypeError: res.writeHead is not a function - Next Js Next.js getStaticPaths 上的预呈现错误 - Next.js prerendering error on getStaticPaths 错误构建 NextJS 应用程序错误发生预呈现页面 - Error Building NextJS App Error occurred prerendering page 预渲染页面“/404”时出错,页面/_error 出错:无法导出带有`getServerSideProps` 的页面 - Error occurred prerendering page "/404" and Error for page /_error: pages with `getServerSideProps` can not be exported 使用svg格式的D3.js预渲染饼图服务器时出错 - Error prerendering server of a pie chart with D3.js in svg format 由于 plotly.js,Next.js 纱线构建失败(发生构建错误 ReferenceError: self is not defined) - Next.js yarn build failed due to plotly.js (Build error occurred ReferenceError: self is not defined) 链接到动态页面时出现下一个js错误 - Next js error when linking to a dynamic page 预渲染Vue.js表单 - Prerendering Vue.js form
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM