Next JS returning 500 error after adding new product

What are the details of your problem ?

I am encountering an issue in my nextjs application, The project i am working on is an e-commerce application where backend framework used is laravel and the frontend framework is nextjs.The application is currently hosted on Digital Ocean App Platform and has two separate environments, i.e production and staging.When i add a new product in admin panel, the new product is created and hence it is shown in homepage, but the problem is when i navigate to products detail page,and also when i hover on the product on homepage which uses nextjs Link component and has prefetch enabled it gives me 500 internal server error.

Things to note:

1. I tested locally using both staging and production environments to try to replicate the issue , but on local machine it is working.
2. I tested on staging environment that is deployed on Digital Ocean App Platform by adding a new product, and it is also working fine.
3. This issue didn’t exist (or i didn’t know it existed) until 3 weeks ago.
4. The application has currently around 1450 pages (ISR) on production environment.

---

Application specification and server specification

Nextjs and react version used:

{
 "next": "13.0.6",
 "react": "18.2.0",
 "react-dom": "18.2.0",
}

Production:

• RAM:4GB
• CPU:4vCPU’s
• Bandwidth: 250GB
• Instance:2

Staging:

• RAM:2GB
• CPU:2vCPU’s
• Bandwidth: 100GB
• Instance:1

Local Machine

• RAM:32GB
• CPU: Intel i5 13th gen

Below is the code for both homepage and product detail page :

Get static props for home page:

export async function getStaticProps() {
    const queryClient = new QueryClient();

    await queryClient.prefetchQuery({
        queryKey: [KEYS.bannerList],
        queryFn: getBannerList,
    });
    await queryClient.prefetchQuery({
        queryKey: [KEYS.featuredCategory],
        queryFn: fetchFeaturedCategory,
    });
    await queryClient.prefetchQuery({
        queryKey: [KEYS.getAllHomeData],
        queryFn: fetchAllHomeData,
    });

    return {
        props: {
            dehydratedState: dehydrate(queryClient),
        },
        revalidate: 10
    };
}

Get static paths and getstatic props for product detail page:

export async function getStaticPaths() {
    const data = await fetch(`${baseURL}/api/all-product`, {
        cache: 'no-cache',
    })
        .then((response) => response.json())
        .then((data) => data?.data);

    const paths = await data?.map((product) => ({
        params: { product_slug: product.slug },
    }));

    return {
        paths: paths || [],
        fallback: 'blocking',
    };
}

export async function getStaticProps(context) {
    const { product_slug } = context.params;
    const queryClient = new QueryClient();

    await queryClient.prefetchQuery({
        queryKey: [KEYS.productsDetails, { product_slug }],
        queryFn: () => getProductDetails(product_slug),
    })
    return {
        props: {
            dehydratedState: dehydrate(queryClient),
        },
        revalidate: 10
    };
}

These are the general info’s that i get back from network tabs: GENERAL

• Request URL:{{hostname}}/_next/data/7CjVi7i3xpZZ4UAXQAoPQ/product/asus-vivobook-s-14-flip-2024-ryzen5-price.json
• Request Method: HEAD
• Status Code:500 Internal Server Error
• Referrer Policy:no-referrer

RESPONSE HEADERS

• alt-svc:h3=“:443”; ma=86400
• cache-control:private
• cf-cache-status:MISS
• cf-ray:8e8b0f2acc1d7f25-MAA
• content-type:text/html; charset=utf-8
• date:Tue, 26 Nov 2024 15:54:50 GMT
• priority:u=1,i
• server:cloudflare
• server-timing:cfExtPri
• vary:Accept-Encoding
• x-do-app-origin:ceec05bb-dd58-4262-bbe3-222ad9cedc15
• x-do-orig-status:500
• x-nextjs-matched-path:/product/[product_slug]
• x-powered-by:Next.js

What did you try and what were you expecting?

• I tried to replicate the issue in local environment in which i had no luck , so my best option is to go to digital ocean’s dashboard and force rebuild and redeploy which only works until the new product is added.

• I also tried by updating the version to nextjs to latest stable version.

• I tried using nextjs standalone output mode in local environment using docker, which is also working fine.

I am trying to figure out whether the error is from app platform side or nextjs framework side , since the problem is only arising on production environment.