在 Next JS 中預呈現頁面時發生錯誤

Question

我在下一個 JS 中（在pages\/api<\/code>文件夾中）創建了一個 API，並在pages<\/code>文件夾中的頁面上使用了它。

當我在 localhost（開發階段）上運行時，可以正確調用 API。 但是當我部署到 Vercel 時，在構建過程中會出現錯誤。

這是我調用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,
  }
}

Answer 1

您不應該從 getStaticProps 獲取內部 API 路由 - 相反，您可以直接在 getStaticProps 中編寫 API 路由中的獲取代碼。

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