Components provided by JSS for Next.js

Current version: 22.0

JSS for React provides helper components that help render Sitecore data, provide context data, handle errors, or integrate with various products from the Sitecore ecosystem.

ComponentPropsContext

The ComponentPropsContext component stores data fetched at component level in the value property.

In the application template, this component wraps the entire page, including the SitecoreContext component. The component properties, as returned by the component-level getStaticProps or getServerSideProps, are provided as part of the page properties.

RequestResponse
const SitecorePage = ({ notFound, componentProps, layoutData }: SitecorePageProps): JSX.Element => {

  // ... other code
   return (
      <ComponentPropsContext value={componentProps}>
        <SitecoreContext
          componentFactory={isEditing ? editingComponentFactory : componentFactory}
          layoutData={layoutData}
        >
         // ... layout components
        </SitecoreContext>
      </ComponentPropsContext>
    );
  // ...
 
}

SitecoreContext

The SitecoreContext component provides a way to pass the component factory as well as layout data through the component tree without having to pass props down manually at every level. The SitecoreContext component wraps root page placeholder or layout components, depending on how you code the application.

For example, if you use the componentFactory property of the SitecoreContext component, you can specify a different component factory while editing the page in Sitecore Pages for XM Cloud.

RequestResponse
import { componentFactory, editingComponentFactory } from 'temp/componentFactory';    
// ... 
<SitecoreContext
  componentFactory={isEditing ? editingComponentFactory : componentFactory}
  layoutData={layoutData}
  >
    {isComponentRendering ? (
      <EditingComponentPlaceholder rendering={layoutData.sitecore.route} />
     ) : (
       <Layout layoutData={layoutData} />
     )}
</SitecoreContext>
// ...

Placeholder

The Placeholder component groups one or more nested components or nested placeholders. The contents of placeholders are determined by how content authors and editors have structured the page layout. When added to the app's root component, or another component, the Placeholder component creates a named placeholder key. You can use the named placeholder key for dynamically placing other components registered with JSS in the corresponding placeholder.

To find out more about the Placeholder component see the following documentation:

You can also enhance placeholders with special components, such as the HiddenRendering, MissingComponent, or custom error components.

Field helper components

The Next.js SDK provides several components that help you render Sitecore field values. For some fields, you can use components that wrap framework-specific components, such as the NextImage component, introduced in JSS 20.1.

Do you have some feedback for us?

If you have suggestions for improving this article,