Individual page routes i.e /products/:id - shows 500 Internal Server Error

Site name:

My site deployed perfectly, no build errors but whenever I visit any page that fetches from an API, I encounter the following error: 500 | Internal Server Error.
I have tried everything to no avail, I tried checking the functions log but it kept loading for like an hour and produced no response. From here on out, I will provide as much information as I have.

  1. The error only shows up on unique routes or individual routes i.e (/products/:id or /blog/:id)
    eg →
    eg → O.C. Hexagon - Industrial Chemicals and Solutions

  2. The error doesn’t occur on local or on vercel deployment. You can test this here:

I could easily switch to vercel but I genuinely love netlify and would love to use them as much as possible. It would be a shame if I couldn’t use nextjs at all on netlify.

  1. I have a suspicion on what may be causing the error, I’ll describe it here:
    In order to optimize firebase requests, I am making one attempt to get all the products/ blog posts in the collection:
export async function fetchBlog() {
  try {
    const querySnapshot = await getDocs(collection(firestore, "blog"));
    const blog = [];
    querySnapshot.forEach((doc) => {
      blog.push({ id:, data: });
    return blog;
  } catch (error) {
    console.error("Error fetching blogs:", error);
    throw error;

export async function fetchProducts() {
  try {
    const querySnapshot = await getDocs(collection(firestore, "products"));
    const products = [];
    querySnapshot.forEach((doc) => {
      products.push({ id:, data: });
    return products;
  } catch (error) {
    console.error("Error fetching products:", error);
    throw error;

After which I simple iterate through the array to get the specific post I want:

"use client";
import Read from "@assets/read.svg";
import Image from "next/image";
import { useState, useEffect } from "react";
import { fetchBlog } from "../../../../firebase/utils";

const Page = ({ params }) => {
  const [blog, setBlog] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const data = await fetchBlog();
      } catch (error) {
        console.error("Error fetching blog data:", error);
  }, []);

  const id = String(;
  const post = blog.find((postCard) => === id);

I have a feeling that if I changed this logic to fetch each product/post differently, the error would not occur.

However, I am curious as to why I have to do that seeing as vercel (which netlify is superior too in my opinion) deploys it rather easily ( I know they made it ).

  1. This is from my console log:
    main-1f9f0e6e2c61fa3a.js:1 {name: ‘Internal Server Error.’, message: ‘500 - Internal Server Error.’, statusCode: 500}

(anonymous) @ main-1f9f0e6e2c61fa3a.js:1
Promise.then (async)

main-1f9f0e6e2c61fa3a.js:1 A client-side exception has occurred, see here for more info: Client-side Exception Occurred | Next.js

P.S, the code is open source so you can see it here → GitHub - joshytheprogrammer/ochexagonv2: The official repository for the O.C. Hexagon website.

Any and all advice would be appreciated. I am to do a presentation to the client today so I will use the vercel deploy for that if I can’t resolve it by then. No pressure - thank you!!!

Hi, @joshy111. It appears you deleted the site in question so I am unable to research this to find out more about the error you were seeing.

If you would be willing to redeploy the repo at Netlify again and let us know the site subdomain or site API id, our support team will take a look to see if we can discover why the error is occurring.

Sure I will do that you were taking so much time to respond I couldn’t move forward.

I just tested, the error is still there…

Thanks a lot man.

This issue: