Vercel deployment: Error occurred prerendering page "/" TypeError: fetch failed

Question

Yesterday I deployed my project (using Sanity.io) to Vercel and no issue.

Today I edited my code and want to deploy the new version with this commands:

vercel build

vercel deploy --prebuilt

vercel --prod

The last command gave me an error message:

vercel error screenshot

And it's seem the error comes from fetchPageInfo.js

fetchPageInfo.js

export const fetchPageInfo = async() => {
    const res = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/getPageInfo`);
    const data = await res.json();
    const pageInfo: PageInfo = data.pageInfo
    
    return pageInfo; 

index.tsx

export const getStaticProps: GetStaticProps<Props> = async () => {
  const pageInfo: PageInfo = await fetchPageInfo();
  const experience: Experience[] = await fetchExperience();
  const skills: Skill[] = await fetchSkills();
  const projets: Projet[] = await fetchProjet();
  const socials: Social[] = await fetchSocial();
  return {
    props: {
      pageInfo,
      experience,
      skills,
      projets,
      socials,
    },
    revalidate:10,
  };
};

env.local

NEXT_PUBLIC_SANITY_DATASET =  production
NEXT_PUBLIC_SANITY_PROJECT_ID = *<hideContent>*
NEXT_PUBLIC_BASE_URL = http://localhost:3000/
GENERATE_SOURCEMAP=false

I'm new on Sanity and Vercel and I suppose that Sanity and Vercel communicated together and Vercel convert NEXT_PUBLIC_BASE_URL to the real URL and not the local

I tried to directly pass the projetId key in the sanity.ts and put the real online URL in the fetchPageInfo (this edit gave me this error: Failed to parse URL from undefined/api/getExperience

But when I put the URL in Safari I retrieved all the data.

So I'm stuck...

Can someone help me please ?

Answer 1

I solved this issue by following the below steps:

• Added NEXT_PUBLIC_BASE_URL = "Vercel URL goes here instead of localhost"
• Replaced fetch requests with axios requests at all utility files (fetch requests have some default timeouts)
• Added staticPageGenerationTimeout: 200, at next.config.js

You have to remember:

With NextJS, client is server is ONE

This is the reason NEXT_PUBLIC_BASE_URL has to be the final deployment URL of your project instead of localhost.

Note: The last two actions I made to solve the problem, (axios and staticPage timeout) are due to the fact that my internet connection is slow