[SOLVED] Next.js & sanity | Error occurred prerendering page "/" while npm run build

Next.js application uses sanity,

I tried so many things but none of them worked for me, Every component is exported and imports are also correct. while doing npm run build application gives following error


    Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
    TypeError: fetch failed
        at Object.fetch (node:internal/deps/undici/undici:11457:11)
        at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
        at async fetchPageInfo (/vercel/path0/.next/server/pages/index.js:1280:17)
        at async getStaticProps (/vercel/path0/.next/server/pages/index.js:1196:22)
    > Export encountered errors on following paths:
        /

following is my env


    NEXT_PUBLIC_SANITY_DATASET=
    NEXT_PUBLIC_SANITY_PROJECT_ID=
    NEXT_PUBLIC_BASE_URL=http://localhost:3000
    NEXT_PUBLIC_SANITY_API_VERSION=
    NEXT_PUBLIC_SANITY_API_TOKEN=

Sanity client


    import {createClient} from 'next-sanity'
    import imageUrlBuilder from '@sanity/image-url'
    import { SanityImageSource } from "@sanity/image-url/lib/types/types";
    
    export const config = {
       projectId : process.env.NEXT_PUBLIC_SANITY_PROJECT_ID, 
         dataset : process.env.NEXT_PUBLIC_SANITY_DATASET, 
         apiVersion : process.env.NEXT_PUBLIC_SANITY_API_VERSION,
         useCdn: true
       };
       
       
       export const client = createClient(config);
    
       const builder = imageUrlBuilder(client);
       export function urlFor(source: SanityImageSource) {
          return builder.image(source)
       }

Apis are created inside pages/API folder and listened separately in utils folder using fetch function, everything is working locally fine
following is index.ts


   import { Inter } from 'next/font/google'
   import Head from 'next/head'
   import Header from '../components/Header'
   import Hero from '../components/Hero'
   import About from '@/components/About'
   import WorkExperience from '@/components/Experience'
   import SkillsComp from '@/components/Skills'
   import ProjectsComp from '@/components/Projects'
   import ContactMe from '@/components/ContactMe'
   import Link from 'next/link'
   import { motion } from 'framer-motion'
   import { Experience, PageInfo, Projects, Skills, Social } from '@/typing'
   import { GetStaticProps } from 'next'
   import { fetchPageInfo } from '@/utils/fetchPageInfo'
   import { fetchExperience } from '@/utils/fetchExperience'
   import { fetchProjects } from '@/utils/fetchProjects'
   import { fetchSkills } from '@/utils/fetchSkills'
   import { fetchSocials } from '@/utils/fetchSocials'
   
   const inter = Inter({ subsets: ['latin'] })
   
   type Props = {
     pageInfo: PageInfo;
     experience: Experience[];
     projects: Projects[];
     skills: Skills[];
     socials: Social[];
   }
   
   export default function Home({pageInfo, experience, projects, skills, socials}: Props) {
   
     return (
       <main
       className={`bg-[rgb(36, 36, 36)] text-white h-screen overflow-y-scroll overflow-x-hidden snap-y snap-mandatory scroll-smooth ${inter.className}`}
       >
         <Head>
           <title>
             Prathamesh Pawar
           </title>
         </Head>
   
   
           <div className='sticky top-0 mb-100' style={{zIndex:26}}>
             <Header socials={socials}/>
           </div>
   
           <section id='hero' className='snap-start' style={{zIndex:1}}> 
             <Hero pageInfo={pageInfo}/>
           </section>
   
           <section id='about' className='snap-center' style={{zIndex:1}}>
             <About pageInfo={pageInfo}/>
           </section>
   
           <section id='experience' className='snap-center' style={{zIndex:1}}>
             <WorkExperience experience={experience} />
           </section>
   
           <section id='skills' className='snap-center' style={{zIndex:1}}>
             <SkillsComp skills={skills}/>
           </section>
   
           <section id='projects' className='snap-center' style={{zIndex:1}}>
             <ProjectsComp projects={projects} />
           </section>
   
           
           <section id='contactme' className='snap-end' style={{zIndex:1}}>
             <ContactMe pageInfo={pageInfo}/>
           </section>
         </main>
     )
   }
   
   
   export const getStaticProps: GetStaticProps<Props> = async ()=>{
     const pageInfo: PageInfo = await fetchPageInfo();
     const experience: Experience[] = await fetchExperience();
     const projects: Projects[] = await fetchProjects();
     const skills: Skills[] = await fetchSkills();
     const socials: Social[] = await fetchSocials();
   
     return {
       props :{
         pageInfo,
         experience,
         projects,
         skills,
         socials
       },
       revalidate:10
     }
   }

used production build on versel using git repository - same error again

Asked ChatGPT about it, response is -->


    The error message suggests that there is an issue with the `fetch` function in your `fetchPageInfo` function, specifically when fetching the data for the page. This error is causing the export process to fail.
    
    To troubleshoot this issue, you can try the following steps:
    
    1. Check the URL or API endpoint you are using in the `fetch` function. Make sure it is correct and accessible.
    2. Verify that the server hosting the API is running and responding properly.
    3. Ensure that any required headers or authentication tokens are correctly included in the fetch request.
    4. Check if there are any network restrictions or firewall settings that might be blocking the fetch request.
    5. Test the `fetch` function outside of the Next.js export process to see if it works independently.