Context item field data in sitecoreContext from ComponentWithContextProps, is undefined all the time. ComponentWithContextProps is import of lib/component-props. Below are the screen shot of code, lib, console log of browser.

enter image description here

enter image description here

enter image description here

2 Answers 2


I can see in the attached picture , we have to use sitecoreContext not with props .

You can access `sitecoreContext` by withSitecoreContext/useSitecoreContext
 * @example withSitecoreContext()(ContentBlock)
 * @example const { sitecoreContext } = useSitecoreContext()

First off all you need to import useSitecoreContext:

import {
 } from '@sitecore-jss/sitecore-jss-nextjs';

and when you want to use it :

  const { sitecoreContext } = useSitecoreContext();

  return (
  <div className="sitecoreContext">
    <li>Sitecore item ID: {context.sitecoreContext.itemId}</li>
    <li>Sitecore item language: {context.sitecoreContext.language}</li>
    <li>Sitecore site name: {context.sitecoreContext.site?.name}</li>

For the Context props to work, you have to wrap the component with withSitecoreContext()

Add the below lines in your component definition:

Import the withSitecoreContext,

import { withSitecoreContext } from '@sitecore-jss/sitecore-jss-nextjs';

And export the component like this,

export default withSitecoreContext()<ComponentWithContextProps>(MyComponent);

If you have other stuff in your props, extend the props with ComponentWithContextProps, and use it like this:

export type MyComponentProps {
  fields: {}
} & ComponentWithContextProps

And change the export to:

export default withSitecoreContext()<MyComponentProps>(MyComponent);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.