Netlify not able to handle routing properly

We have a 404 issue with NextJS 14 (pages) application connected to Sitecore CMS on a Wildcard route.

Netlify site name: dev-tileshop.netlify.app
Build: Netlify
I asked Netlify AI, but I didn’t get any useful answer, also it’s not keeping the context and there is a 300-character limit, due to that not being able to provide the full context in a single input.

Details:
It’s a NextJS 14 application that uses a pages directory. Data is coming from Sitecore XM Cloud and Sitecore is responsible for route definitions.

In the NextJS application, we have the following files responsible for pages:

  • /pages/products/[…path].tsx
  • /pages/[[…path]].tsx

Here is the code for /pages/products/[...path].tsx file:

import { useEffect } from 'react';
import { GetStaticPaths, GetStaticProps } from 'next';
import NotFound from 'src/NotFound';
import Layout from 'src/Layout';
import {
  RenderingType,
  SitecoreContext,
  ComponentPropsContext,
  EditingComponentPlaceholder,
  StaticPath,
} from '@sitecore-jss/sitecore-jss-nextjs';
import { handleEditorFastRefresh } from '@sitecore-jss/sitecore-jss-nextjs/utils';
import { SitecorePageProps } from 'lib/page-props';
import { QueryClient, dehydrate } from '@tanstack/react-query';
import { sitecorePagePropsFactory } from 'lib/page-props-factory';
import { componentBuilder } from 'temp/componentBuilder';
import { QUERY_CONFIG } from '@/constants/react-query';
import { ProductService } from '@/api';

const SitecorePage = ({
  notFound,
  componentProps,
  layoutData,
  headLinks,
}: SitecorePageProps): JSX.Element => {
  useEffect(() => {
    handleEditorFastRefresh();
  }, []);

  console.log('layoutData', layoutData);

  if (notFound || !layoutData?.sitecore?.route) {
    return <NotFound />;
  }

  const isEditing = layoutData.sitecore.context.pageEditing;
  const isComponentRendering =
    layoutData.sitecore.context.renderingType === RenderingType.Component;

  return (
    <ComponentPropsContext value={componentProps}>
      <SitecoreContext
        componentFactory={componentBuilder.getComponentFactory({ isEditing })}
        layoutData={layoutData}
      >
        {isComponentRendering ? (
          <EditingComponentPlaceholder rendering={layoutData.sitecore.route} />
        ) : (
          <Layout layoutData={layoutData} headLinks={headLinks} />
        )}
      </SitecoreContext>
    </ComponentPropsContext>
  );
};

export const getStaticPaths: GetStaticPaths = async () => {
  const paths: StaticPath[] = [];
  let fallback: boolean | 'blocking' = 'blocking';

  if (process.env.NODE_ENV !== 'development' && !process.env.DISABLE_SSG_FETCH) {
    try {
      // Note: Next.js runs export in production mode
      console.log('paths', JSON.stringify(paths));
    } catch (error) {
      console.log('Error occurred while fetching static paths');
      console.log('ERR', error);
    }

    fallback = process.env.EXPORT_MODE ? false : fallback;
  }

  return {
    paths,
    fallback,
  };
};

export const getStaticProps: GetStaticProps = async (context) => {
  const queryClient = new QueryClient(QUERY_CONFIG);

  if (context.params) {
    context.params.requestPath = context.params.path;
    context.params.path = [`products/,-w-,`];
  }

  const path = context?.params?.requestPath;
  const productsPath = typeof path === 'string' ? path : path?.pop() ?? '';
  let props = {} as SitecorePageProps;
  let productData;
  console.log('productsPath', productsPath);
  try {
    const [_layoutData, _productData] = await Promise.all([
      queryClient.fetchQuery({
        queryKey: ['layoutData', 'products', productsPath],
        queryFn: () => sitecorePagePropsFactory.create(context),
      }),
      queryClient.fetchQuery({
        queryKey: ['productData', productsPath],
        queryFn: () => ProductService.productGetProductItemDetails(productsPath),
      }),
    ]);
    props = _layoutData;
    productData = _productData;
    console.log('productData1', productData);
    console.log('props1', props);
  } catch (error) {
    console.log('productsPath', productsPath);
    console.log('productData1', productData);
    console.log('props1', props);
    console.log('Error fetching data:', error);
  }
  console.log('productData2', productData);
  console.log('props2', props);
  if (productData) {
    console.log('productsPath', productsPath);
    console.log('productData1', productData);
    console.log('props1', props);
    props.notFound = false;
    props.layoutData.sitecore.context = {
      ...props.layoutData.sitecore.context,
      productData,
    };
  } else {
    props.notFound = false;
  }
  console.log('productData', productData);
  console.log('props3', props);
  return {
    props: {
      ...props,
      dehydratedState: JSON.parse(JSON.stringify(dehydrate(queryClient))),
    },
    revalidate: 5, // In seconds
    notFound: props.notFound, // Returns custom 404 page with a status code of 404 when true
  };
};

export default SitecorePage;

Problem:

Locally in dev and production mode, it’s working fine. Using netlify cli and netlify dev command it’s working as well. All other pages are working fine.

Our observations:

  • We are not able to see any console.log-s in Netlify that we added in /products/[…path].tsx file. - This tells me that it’s this file is not even being called.

Suggestions across the internet:

  • There is a suggestion to define redirects in Netlify - Not really an option because we are not redirecting. Redirect is valid for slug or domain redirection. Here it’s straight forward call to exact same URL.
  • There is a suggestion to Downgrade NextJS to 13 - This is not an option because we have other issues that require NextJS 14 to fix.

UPDATE: We have deployed the application to Vercel and it’s working fine there. There is some issue on the Netlify side.

Hi @azar-altudo,

You have a helpdesk ticket about this. Could we please continue the discussion in a single thread to not have duplicated efforts?

As a next step, we’re going to require a minimal reproduction, or if that’s not possible, we’d need access to your repo to check the issue further.

1 Like