Site name: ochexagonv2.netlify.app
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.
-
The error only shows up on unique routes or individual routes i.e (/products/:id or /blog/:id)
eg → https://ochexagon.com/products/4dsj7MwMjAY3TAuqWcLY
eg → O.C. Hexagon - Industrial Chemicals and Solutions -
The error doesn’t occur on local or on vercel deployment. You can test this here: https://ochexagonv2.vercel.app/
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.
- 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: doc.id, data: doc.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: doc.id, data: doc.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();
setBlog(data);
setLoading(false);
} catch (error) {
console.error("Error fetching blog data:", error);
setError(error);
setLoading(false);
}
}
fetchData();
}, []);
const id = String(params.id);
const post = blog.find((postCard) => postCard.id === 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 ).
- 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!!!
