Why am I getting prerender errors in Next.js 14 build?

Question

I am encountering an issue when running the next build command on my Next.js 14 application. The build process fails with the following prerendering errors:

I have checked the links provided, but I am still unable to resolve the issue. Could someone please help me understand why these errors are occurring and how I can fix them? Additionally, if there are specific steps or configurations I should be aware of for prerendering pages correctly in Next.js 14, I would appreciate any guidance or resources. Thank you in advance for your assistance!

Error:

Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error Error occurred prerendering page "/categories". Read more: https://nextjs.org/docs/messages/prerender-error

Export encountered errors on following paths: /_not-found /categories/page: /categories /competition/page: /competition /page: /

folder strucuture:

src/app/
       /page.tsx
       /cateogies/page.tsx

app/page.tsx

"use client";
import BackgroundPhotoFooter from "@/elements/BackgroundPhoto";
import CategoryList from "@/elements/CategoryList";
import Footer from "@/elements/footer";
import { useEffect, useState } from "react";
import { Modal } from "antd/lib";
import { getCategories, getCompetitions } from "@/services/categories";
import { useTranslation } from "next-i18next";
import LoginModule from "@/elements/Login";
import { ICategory } from "@/models/Category";
import { Spin } from "antd";
import { ICompetition } from "@/models/Competition";
import CompetitionList from "@/elements/CompetitionList";
import { Box, Container, Grid, Typography } from "@mui/material";
import ButtonCustom from "@/elements/ButtonCustom";
import Link from "next/link";
import Menu from "@/elements/Menu";
import Header from "@/elements/header";
import Image from "next/image";
import { useKeycloak } from "@/context/KeycloakContext";

export default function Home() {
  const { t } = useTranslation("description");
  const [categories, setCategories] = useState<ICategory[]>([]);
  const [competitions, setCompetition] = useState<ICompetition[]>([]);
  const [isLoading, setLoading] = useState(true);
  const [isCategoryLoading, setCategoryLoading] = useState(true);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [selectedCategory, setSelectedCategory] = useState(0);
  const { authenticated, loading: authLoading } = useKeycloak();

  const onCategorySelect = (id: number) => {
    setSelectedCategory(id);
    setCategoryLoading(true);
    getCompetitions()
      .then((data) => setCompetition(data))
      .catch((err) => console.error(err));
    setTimeout(() => {
      setCategoryLoading(false);
    }, 1000);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  useEffect(() => {
    if (isLoading) {
      try {
        getCategories()
          .then((data) => {
            setCategories(data);
            setSelectedCategory(data[0].id);
          })
          .catch((err) => console.error(err));

        getCompetitions()
          .then((data) => setCompetition(data))
          .catch((err) => console.error(err));
      } catch (err) {
        console.error("errore: " + err);
      }

      setTimeout(() => {
        setLoading(false);
        setCategoryLoading(false);
      }, 1000);
    }
  }, [isLoading]);

  const exploreAll = (categoryId: number) => {
    console.log("Explore category: " + categoryId);
  };

  if (authLoading) {
    return (
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          height: "100vh",
        }}
      >
        <Spin size="large" />
      </div>
    );
  }

  return (
    <>
      <Header />
      <Modal
        title=""
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
        footer={null}
        closable={false}
        okButtonProps={{ style: { display: "none" } }}
        cancelButtonProps={{ style: { display: "none" } }}
      >
        <div className="columns-2 ...">
          <div>
            <Image
              loading="lazy"
              quality={75}
              style={{ marginBottom: "30%" }}
              src="/dog.png"
              width={200}
              height={700}
              alt="dog"
            />
          </div>
          <div>
            <Image
              loading="lazy"
              quality={75}
              src="/ui.png"
              width={240}
              height={60}
              alt="photo image"
              style={{ marginLeft: "20px", marginTop: "20px" }}
            />
          </div>
        </div>
      </Modal>

      <Box
        style={{
          backgroundImage: `url(${"header.png"})`,
          width: "100%",
          height: "900px",
          backgroundPosition: "center",
          backgroundSize: "cover",
          backgroundRepeat: "no-repeat",
        }}
      >
        <Container maxWidth="xl">
          <Grid
            container
            spacing={6}
            sx={{
              pt: 10,
            }}
          >
            <Grid item xs={12} md={6}>
              <Box
                component="img"
                sx={{
                  mt: 10,
                  mb: 5,
                  height: "auto",
                  width: 300,
                }}
                alt="IShotIt"
                src="/logo.png"
              />
              <Typography variant="h1" sx={{ color: "white", mb: 4 }}>
                Show The World Your Best Photos.
              </Typography>
              <Typography variant="h2" sx={{ color: "white" }}>
                Recognized Awards and Big Prizes!
              </Typography>
            </Grid>

            <Grid
              item
              xs={12}
              md={6}
              sx={{
                display: { xs: "none", md: "inline-block" },
              }}
            >
              {authenticated ? <Menu invert={false} /> : <LoginModule />}
            </Grid>
          </Grid>
        </Container>
      </Box>
      {isLoading ? (
        <div
          style={{
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            height: "50vh",
          }}
        >
          <Spin size="large" />
        </div>
      ) : (
        <>
          {categories != undefined && categories.length > 0 && (
            <CategoryList
              categories={categories}
              onCategorySelect={onCategorySelect}
            />
          )}
          {isCategoryLoading ? (
            <div
              style={{
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
                height: "50vh",
              }}
            >
              <Spin size="large" />
            </div>
          ) : (
            competitions != undefined &&
            competitions.length > 0 && (
              <Box>
                <CompetitionList competitions={competitions} />
                <Box
                  sx={{
                    display: "flex",
                    justifyContent: "center",
                    mt: 5,
                  }}
                >
                  <Link href={`/categories?id=${selectedCategory}`} passHref>
                    <ButtonCustom
                      text={"Explore All"}
                      onClick={() => exploreAll(selectedCategory)}
                    />
                  </Link>
                </Box>
              </Box>
            )
          )}
        </>
      )}
      <Box sx={{ mt: 10 }} />
      <BackgroundPhotoFooter />
      <Footer />
    </>
  );
}