Components provided by JSS for Next.js

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.

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>
    );
  // ...
 
}

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.

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

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.

The VisitorIdentification component helps Sitecore Experience Analytics to determine if the visitor is a robot. If you're using Sitecore XP (with xConnect/xDB), this component is required for collecting analytics data from the JSS app. For XM (CMS-only) apps, we recommend that you remove this component.

Visitor identification logic runs only once for a given analytics ID, creating the necessary cookies.

The component is included and set up in the nextjs-styleguide-tracking add-on.

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