Setup A Sitecore JSS Authorable 404 Page For A NextJs Front-End

Building A Sitecore Authorable 404 Error Page For NextJs

You've built a great NextJs site for your Sitecore JSS implementation and you need to add an error page. For sake of discussion we're going to build a 404 page specifically.

There are a few good blogs out there. Obviously you could just build a plain, static 404. Nothing wrong with that. However, I think most of our customers would prefer to have the same capability as any other page and be able to author it as they see fit.

If you used Sitecore SXA, doing so was a piece of cake. Unfortunately not the case with Sitecore 10.2, JSS, NextJs. It's a step back, though I'm fairly confident future versions will rectify this missing capability.

Add A 404 Item In Sitecore

I won't go into detail how this is done as you basically just need an item in your tree, under the Home node that will be designated the 404 page. It can be any design you want, layout you want, customize it to your liking. I recommend going with the name: _404 as it indicates it's not a usual page.

Updating The 404 Page In NextJs

This is where the meat and potatoes are. You're basically going to ignore the /pages/404.tsx (if your project even has one).

One key important point is if you are using SSR (i.e. Server Side Rendering). If you do, you can't add the appropriate code to your 404.tsx page as upon running next build it will try and render it and that will just fail.

Instead we're going to update the file: [[...path]].tsx

We will modify the GetStaticProps function appropriately to fetch the actual page in Sitecore.

export const getStaticProps: GetStaticProps = async (context) => {
    let props = await sitecorePagePropsFactory.create(context);
    // This is the important part. If no route exists, redirect to the _404 page.
    if (!props.layoutData?.sitecore?.route) {
        const path = '/_404';

        // Update the layout from Sitecore
        props = await sitecorePagePropsFactory.create({
        ...context,
        params: { ...context.params, path: path },
        });
    }
    return {
        props,
        revalidate: 5, // In seconds
        notFound: props.notFound, // Returns custom 404 page with a status code of 404 when true
    };
};

Keeping the code confined to here means that when the next build runs and it will only try and render pages that exist.