---
title: "Components provided by JSS for Next.js"
slug: "components-provided-by-jss-for-next-js"
abstract: "Describes components provided by JSS for Next.js to assist with rendering Sitecore data."
---
# Components provided by JSS for Next.js

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](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/component-level-data-fetching-in-jss-next-js-apps.html "Component-level data fetching in JSS Next.js apps") 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.

```jsx
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.

```jsx
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:

- [Introducing placeholders in JSS apps](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/introducing-placeholders-in-jss-apps.html "Introducing placeholders in JSS apps")
- [Working with placeholders in Next.js apps](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/working-with-placeholders-in-a-jss-next-js-app.html "Working with placeholders in a JSS Next.js app")

You can also [enhance placeholders with special components](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/working-with-placeholders-in-a-jss-next-js-app.html#UUID-39fb7b3d-cdaf-46e1-8c13-63be32251da1_section-idm4570943970512032630350849852 "Enhancing experience with placeholders"), such as the `HiddenRendering`, `MissingComponent`, or custom error components.

## VisitorIdentification

The `VisitorIdentification` component helps [Sitecore Experience Analytics](https://doc.sitecore.com/xp/en/users/104/sitecore-experience-platform/en/experience-analytics.html) 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.

## Field helper components

The Next.js SDK provides several components that help you [render Sitecore field values](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/jss-components-for-rendering-sitecore-fields-in-next-js-applications.html "JSS components for rendering Sitecore fields in Next.js applications"). For some fields, you can opt for using components that wrap framework-specific components, such as the [NextImage component](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/the-jss-nextimage-component.html "The JSS NextImage component"), introduced in JSS 20.1.