diff --git a/CHANGELOG.md b/CHANGELOG.md index e891eaf5f0..e5fa9afe41 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -32,6 +32,7 @@ Our versioning strategy is as follows: * `[sitecore-jss-proxy]` Setting "followRedirects" to "true" breaks HEAD requests ([#1630](https://github.com/Sitecore/jss/pull/1630)) * `[templates/nextjs-sxa]` Fix shown horizontal scrollbar in EE mode. ([#1625](https://github.com/Sitecore/jss/pull/1625)), ([#1626](https://github.com/Sitecore/jss/pull/1626)) * `[sitecore-jss-nextjs]` Fix issue when redirects works each every other times. ([#1629](https://github.com/Sitecore/jss/pull/1629)) +* `[sitecore-jss-nextjs]` Next.js placeholder applies the modifyComponentProps prop. ([#1668](https://github.com/Sitecore/jss/pull/1668)) * `[templates/nextjs]` Fix custom headers. Now in cors-header plugin extends custom headers from next.config.js file. ([#1637](https://github.com/Sitecore/jss/pull/1637)) * `[sitecore-jss-react]` Fix PlaceholderCommon with using two and more dynamic placeholders. ([#1641](https://github.com/Sitecore/jss/pull/1641)) * `[templates/nextjs-multisite]` Fix site info fetch errors (now skipped) on XM Cloud rendering/editing host builds. ([#1649](https://github.com/Sitecore/jss/pull/1649)), ([#1653](https://github.com/Sitecore/jss/pull/1653)) diff --git a/packages/sitecore-jss-nextjs/src/components/Placeholder.tsx b/packages/sitecore-jss-nextjs/src/components/Placeholder.tsx index 42713cb1d1..40fa1361dd 100644 --- a/packages/sitecore-jss-nextjs/src/components/Placeholder.tsx +++ b/packages/sitecore-jss-nextjs/src/components/Placeholder.tsx @@ -4,21 +4,29 @@ import { PlaceholderComponentProps, } from '@sitecore-jss/sitecore-jss-react'; import { ComponentPropsReactContext } from './ComponentPropsContext'; +import { ComponentProps } from '@sitecore-jss/sitecore-jss-react/types/components/PlaceholderCommon'; export const Placeholder = (props: PlaceholderComponentProps) => { const componentPropsContext = useContext(ComponentPropsReactContext); + function getContextProps(initialProps: ComponentProps) { + if (!initialProps.rendering.uid) return initialProps; + + const data = componentPropsContext[initialProps.rendering.uid] as { + [key: string]: unknown; + }; + + return data; + } + return ( { - if (!initialProps.rendering.uid) return initialProps; - - const data = componentPropsContext[initialProps.rendering.uid] as { - [key: string]: unknown; - }; - - return { ...initialProps, ...data }; + const finalProps = props.modifyComponentProps + ? props.modifyComponentProps(initialProps) + : initialProps; + return { ...finalProps, ...getContextProps(initialProps) }; }} /> );