I am quite new in coding and I am struggling with deploying on Vercel. Let me show you whats the problem:
Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: fetch failed
at Object.fetch (node:internal/deps/undici/undici:11118:11)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async fetchPageInfo (/vercel/path0/.next/server/pages/index.js:1045:17)
at async getStaticProps (/vercel/path0/.next/server/pages/index.js:971:22)
at async renderToHTML (/vercel/path0/node_modules/next/dist/server/render.js:385:20)
at async /vercel/path0/node_modules/next/dist/export/worker.js:277:36
at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/trace/trace.js:79:20)
info - Generating static pages (3/3)
> Build error occurred
Error: Export encountered errors on following paths:
/
at /vercel/path0/node_modules/next/dist/export/index.js:409:19
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/trace/trace.js:79:20)
at async /vercel/path0/node_modules/next/dist/build/index.js:1398:21
at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/trace/trace.js:79:20)
at async /vercel/path0/node_modules/next/dist/build/index.js:1258:17
at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/trace/trace.js:79:20)
at async Object.build [as default] (/vercel/path0/node_modules/next/dist/build/index.js:66:29)
Error: Command "npm run build" exited with 1
My index.js looks like that:
import Head from "next/head";
import Header from "../components/Header";
import Hero from "../components/Hero";
import About from "../components/About";
import WorkExperience from "../components/WorkExperience";
import Skills from "../components/Skills";
import Projects from "../components/Projects";
import ContactMe from "../components/ContactMe";
import Link from "next/link";
import type { GetStaticProps } from "next";
import { PageInfo, Experience, Skill, Project, Social } from "../typings";
import { fetchPageInfo } from "../utils/fetchPageInfo";
import { fetchExperience } from "../utils/fetchExperiences";
import { fetchSkills } from "../utils/fetchSkills";
import { fetchProjects } from "../utils/fetchProjects";
import { fetchSocials } from "../utils/fetchSocials";
type Props = {
pageInfo: PageInfo;
experiences: Experience[];
skills: Skill[];
projects: Project[];
socials: Social[];
};
const Home = ({ pageInfo, experiences, skills, projects, socials }: Props) => {
return (
<div className="bg-[rgb(36,36,36)] text-white h-screen snap-y snap-mandatory overflow-y-scroll overflow-x-hidden z-0 scrollbar scrollbar-track-gray-400/20 scrollbar-thumb-[#F7AB0A]/80">
<Head>
<title>{pageInfo?.name}</title>
</Head>
<Header socials={socials} />
<section id="hero" className="snap-center">
<Hero pageInfo={pageInfo} />
{/* About */}
</section>
<section id="about" className="snap-center">
<About pageInfo={pageInfo} />
</section>
{/* Experience */}
<section id="experience" className="snap-center">
<WorkExperience experiences={experiences} />
</section>
<section id="skills" className="snap-start">
<Skills skills={skills} />
</section>
<section id="projects" className="snap-start">
<Projects projects={projects} />
</section>
<section id="contact" className=" snap-start">
<ContactMe pageInfo={pageInfo} />
</section>
<Link href="#hero">
<footer className="sticky bottom-5 w-full cursor-pointer">
<div className="flex items-center justify-center">
<img
className="h-10 w-10 rounded-full filter grayscale hover:grayscale-0 cursor-pointer"
src="https://www.i2symbol.com/images/text-symbols/h-symbol.png"
alt=""
width="10"
height="10"
/>
</div>
</footer>
</Link>
</div>
);
};
export default Home;
export const getStaticProps: GetStaticProps<Props> = async () => {
const pageInfo: PageInfo = await fetchPageInfo();
const experiences: Experience[] = await fetchExperience();
const skills: Skill[] = await fetchSkills();
const projects: Project[] = await fetchProjects();
const socials: Social[] = await fetchSocials();
return {
props: {
pageInfo,
experiences,
skills,
projects,
socials,
},
revalidate: 10,
};
};
and functions for fetching:
import { PageInfo } from "@/typings";
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;
};
I dont know why once I deployed and It was working but now, when I would like to update my website it is making a errors. What I read on google and here it can be because of "getStaticProps".
I tried to build in different way but always some errors. I read doc for NextJS, for Vercel, Sanity. I saw similar problems here but solutions was something small like importing so of course I checked all imports, all good. I saw that was a problem with .env.local so i was modifying this as well. Nothing helped me.
My .env.local:
NEXT_PUBLIC_SANITY_DATASET=production
NEXT_PUBLIC_SANITY_PROJECT_ID=xzcw3ldn
NEXT_PUBLIC_BASE_URL=http://localhost:3000/
after npm run build:
Route (pages) Size First Load JS
┌ ● / (ISR: 10 Seconds) (1058 ms) 106 kB 179 kB
├ /_app 0 B 73.1 kB
├ ○ /404 181 B 73.3 kB
├ λ /api/getExperiences 0 B 73.1 kB
├ λ /api/getPageInfo 0 B 73.1 kB
├ λ /api/getProjects 0 B 73.1 kB
├ λ /api/getSkills 0 B 73.1 kB
├ λ /api/getSocials 0 B 73.1 kB
└ λ /api/hello 0 B 73.1 kB
+ First Load JS shared by all 77.1 kB
├ chunks/framework-2c79e2a64abdb08b.js 45.2 kB
├ chunks/main-627138c22ebf06ea.js 26.8 kB
├ chunks/pages/_app-891652dd44e1e4e1.js 296 B
├ chunks/webpack-59c5c889f52620d6.js 819 B
└ css/af497c945f611ff7.css 3.97 kB
λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps)
○ (Static) automatically rendered as static HTML (uses no initial props)
● (SSG) automatically generated as static HTML + JSON (uses getStaticProps)
(ISR) incremental static regeneration (uses revalidate in getStaticProps)
