---
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 Next.js 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/sai/en/developers/jss/22/jss-sai/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 in the SitecoreAI [page builder](https://doc.sitecore.com/xmc/en/users/xm-cloud/en/creating-webpages.html).

```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/22/sitecore-headless-development/introducing-placeholders-in-jss-apps.html)
- [Working with placeholders in Next.js apps](https://doc.sitecore.com/sai/en/developers/jss/22/jss-sai/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/sai/en/developers/jss/22/jss-sai/working-with-placeholders-in-a-jss-next-js-app.html#UUID-c8dd991b-703b-25ba-bb2b-90bf3e493d96_section-idm4570943970512032630350849852 "Enhancing experience with placeholders"), 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](https://doc.sitecore.com/sai/en/developers/jss/22/jss-sai/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 use components that wrap framework-specific components, such as the [NextImage component](https://doc.sitecore.com/sai/en/developers/jss/22/jss-sai/the-jss-nextimage-component.html "The JSS NextImage component"), introduced in JSS 20.1.