[sitecore-jss-nextjs] Placeholder applies the modifyComponentProps prop.

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))

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 (
     <ReactPlaceholder
       {...props}
       modifyComponentProps={(initialProps) => {
-        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) };
       }}
     />
   );