Error occurred prerendering page in Next JS

Question

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.

But when I deploy to Vercel there is an error during build.

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

You should not fetch an internal API route from getStaticProps — instead, you can write the fetch code in API route directly in getStaticProps.