All the examples I found with Sitecore Headless Next.js use a static 404 page.
When a new Next.js app is create a default 404 Page file is created. This file is statically generated at build time.
import NotFound from 'src/NotFound';
const Custom404 = (): JSX.Element => <NotFound />;
export default Custom404;If we want to customize the 404 page, we have to use getStaticProps to fetch data at build time.
In my example I will use Sitecore Basic Company Example : https://github.com/Sitecore/Helix.Examples/tree/master/examples/helix-basic-nextjs
To customize the 404 page first time we need to create a 404 page inside Sitecore.
Template and 404 page were created in Sitecore, and components were added to the rendering. The page will look like below picture.
To fetch data during build time in Sitecore we have to customize 404.tsx file.
Inside 404.tsx we need to fetch data from _404 error page.
import { SitecorePageProps } from 'lib/page-props'
import { sitecorePagePropsFactory } from 'lib/page-props-factory'
import { GetStaticProps } from 'next'
import SitecorePage from './[[...path]]'
export const getStaticProps: GetStaticProps = async (context) => {
let props = { notFound: false }
props = await sitecorePagePropsFactory.create({
...context,
params: { ...context.params, path: '/_404' },
})
return {
props,
// Next.js will attempt to re-generate the page:
// - When a request comes in
// - At most once every 5 seconds
revalidate: 5, // In seconds
notFound: props.notFound, // Returns custom 404 page with a status code of 404 when true
}
}
export default function Custom404Page({
notFound,
layoutData,
componentProps,
navigation
}: SitecorePageProps): JSX.Element {
return (
<SitecorePage
notFound={notFound}
layoutData={layoutData}
componentProps={componentProps}
navigation={navigation}
dictionary={{}}
locale=""
/>
)
}The SitecorePagePropsFactory class uses an instance of the ComponentPropsService class that helps to identify which components require retrieval of data. The ComponentPropsService is provided by the NPM package @sitecore-jss/sitecore-jss-nextjs.
The ComponentPropsService
The ComponentPropsService accepts the following parameters:
componentModule – a function returning a Next.js component using the componentName argument. You can find the componentModule function definition in the file src/temp/componentFactory. If not present, generate it by running scripts/bootstrap.ts.
layoutData – Layout Service data for your page.
context – The Next.js SSG or SSR context.
The 404 page in Next.js will be:
sitecoreclimber 