0

Heyyyo everyone, I'm encountering an error about pre-renderer in nextjs. I did some searching on google but cant really figure out what the error is about. I'm new to nextjs and this is my first project that is deployed on vercel. Please help me with this.

vercel deployment log

if more info is needed please let me know.

I've tried deleting the node_modules & .next but didnt work (both files are already in the gitignore). I followed this Vercel Next.js build error while prerendering pages but didnt work.

code: /pages/index.tsx

import { Suspense } from "react";
import type { GetStaticProps } from "next";
import Image from 'next/image'
import Head from "next/head";
import Link from "next/link";
import About from "../components/about";
import Contact from "../components/contact";
import Experience from "../components/experience";
import Header from "../components/header";
import Hero from "../components/hero";
import Projects from "../components/projects";
import Skills from "../components/skills";
import * as fetchInterface from "../typings";
import {
    fetchExperience,
    fetchPageInfo,
    fetchProject,
    fetchSkills,
    fetchSocial,
} from "../utils/fetchApi";

interface Props {
    pageInfo: fetchInterface.PageInfo;
    experience: fetchInterface.Experience[];
    skills: fetchInterface.Skill[];
    socials: fetchInterface.Social[];
    project: fetchInterface.Project[];
}

const Home = ({ pageInfo, experience, skills, socials, project }: 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-none">
            <Suspense fallback={<div>loading....</div>}>
                <Head>
                    <title>Kush Bhalodi Portfolio</title>
                </Head>

                <Header socials={socials} />

                <section id="hero" className="snap-start">
                    <Hero pageInfo={pageInfo} />
                </section>

                <section id="about" className="snap-center">
                    <About pageInfo={pageInfo} />
                </section>

                <section id="experience" className="snap-center">
                    <Experience experiences={experience} />
                </section>

                <section id="skills" className="snap-start">
                    <Skills skills={skills} />
                </section>

                <section id="projects" className="snap-start">
                    <Projects projects={project} />
                </section>

                <section id="contact" className="snap-start">
                    <Contact />
                </section>

                <Link href="#hero">
                    <footer className="sticky bottom-5 w-full cursor-pointer">
                        <div className="flex items-center justify-center">
                            <Image src={`https://kush-web.web.app/images/profilepic.jpg`} alt='my-img' width={30} height={30} />
                        </div>
                    </footer>
                </Link>
            </Suspense>
        </div>
    );
};

export default Home;

export const getStaticProps: GetStaticProps<Props> = async () => {

    const pageInfo: fetchInterface.PageInfo = await fetchPageInfo();
    const socials: fetchInterface.Social[] = await fetchSocial();
    const skills: fetchInterface.Skill[] = await fetchSkills();
    const project: fetchInterface.Project[] = await fetchProject();
    const experience: fetchInterface.Experience[] = await fetchExperience();

    return {
        props: {
            pageInfo,
            socials,
            skills,
            project,
            experience,
        },
        revalidate: 10000
    };
};
Kush
  • 1
  • 2
  • Could you please share the code inside `/pages/index.js` if you're using NextJS version < 13 or `app/index/page.js` if you're on NextJS 13 – LCAYSS Dec 17 '22 at 18:43
  • @LCAYSS I've added it here in the desc, its /pages/index.js – Kush Dec 23 '22 at 20:02
  • 1
    Are you by any chance calling internal API endpoints in these fetching functions inside `getStaticProps`? – ivanatias Dec 23 '22 at 20:14
  • @ivanatias Yes, these are the custom endpoints being fetched inside the `getStaticProps`. – Kush Dec 24 '22 at 10:45
  • Then that's the issue. When you are building the app, the API folder's serverless functions have not been deployed yet, but you try to call them on `getStaticProps` to get the data for your page to be built. This is one of the reasons why you should [never call internal API endpoints on Next.js' data fetching functions](https://nextjs.org/docs/basic-features/data-fetching/get-static-props#write-server-side-code-directly). – ivanatias Dec 24 '22 at 18:58
  • @ivanatias alighty, i'll checkout the link and will change it accordingly. Thank you for answering & sharing resources. – Kush Dec 24 '22 at 20:59
  • @ivanatias also what's the best place to do so as per you? maybe some suggestions you would like to give me or tips? – Kush Dec 24 '22 at 22:06
  • Since you need to write the server-side code directly in Next.js' functions but you could also need the api endpoints for client-side use (calling them from your components, for example), what I would do in order to avoid code duplication is to abstract the logic of the api endpoints into let's say services functions that could be used both on the endpoints and `getStaticProps`/`getStaticPaths`. – ivanatias Dec 24 '22 at 22:12

0 Answers0