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:
/
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=
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
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.
Answer was in error itself
TypeError: Fetch Failed
at async fetchPageInfo
at async getStaticProps
I have to update fetch functions in utils, as it was fetching by direct responce, but in index.js, getStaticProps was supposed to deliver json which must implement interface pageInfo, so change was
const pageInfo: PageInfo = data.result as PageInfo;