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({
        params: { ...context.params, path: path },
    return {
        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.

👋 Hey Sitecore Enthusiasts!

Sign up to our bi-weekly newsletter for a bite-sized curation of valuable insight from the Sitecore community.

What’s in it for you?

  • Stay up-to-date with the latest Sitecore news
  • New to Sitecore? Learn tips and tricks to help you navigate this powerful tool
  • Sitecore pro? Expand your skill set and discover troubleshooting tips
  • Browse open careers and opportunities
  • Get a chance to be featured in upcoming editions
  • Learn our secret handshake
  • And more!
Sitecore Snack a newsletter by Fishtank Consulting

Meet David Austin

Development Team Lead | Sitecore Technology MVP x 3


David is a decorated Development Team Lead with Sitecore Technology MVP and Coveo MVP awards, as well as Sitecore CDP & Personalize Certified. He's worked in IT for 25 years; everything ranging from Developer to Business Analyst to Group Lead helping manage everything from Intranet and Internet sites to facility management and application support. David is a dedicated family man who loves to spend time with his girls. He's also an avid photographer and loves to explore new places.

Connect with David