@merkle-open/magnolia-headless-frontend-nextjs 0.0.7 → 0.0.8

package/README.md

@@ -1,4 +1,5 @@
 # Magnolia NextJs Headless Frontend
+
 - [Templates](./src/templates/_README.md)
 - [Proxy/Middleware](./src/middleware/_README.md)
 - [Config](./src/config/_README.md)
@@ -6,71 +7,90 @@
 - [Dynamic-Page](./README_dynamic-page.md)
 
 ## setup
+
 - Add the following dependencies to your package.json
-  - `@merkle-open/magnolia-headless-frontend-nextjs`
-  - [`tsyringe`](https://github.com/Microsoft/tsyringe)
-  - `reflect-metadata`
-  - `next`
-  - `react`
-  - `react-dom`
+    - `@merkle-open/magnolia-headless-frontend-nextjs`
+    - [`tsyringe`](https://github.com/Microsoft/tsyringe)
+    - `reflect-metadata`
+    - `next`
+    - `react`
+    - `react-dom`
 - Configure tsconfig.json to include the following settings (`./tsconfig.json`)
-  ```json
-  {
-    "compilerOptions": {
-      "experimentalDecorators": true,
-      "emitDecoratorMetadata": true
-    },
-    "include": [
-      "node_modules/@merkle-open/magnolia-headless-frontend-nextjs"
-    ]
-  }
-  ```
+    ```json
+    {
+      "compilerOptions": {
+        "experimentalDecorators": true,
+        "emitDecoratorMetadata": true
+      },
+      "include": [
+        "node_modules/@merkle-open/magnolia-headless-frontend-nextjs"
+      ]
+    }
+    ```
 - Configure the [middleware composer](./src/middleware/_README.md#configure-middleware-composer)
-- Implement and bind the interfaces specified [here](./src/config/_README.md) 
+- Implement and bind the interfaces specified [here](./src/config/_README.md)
 - Implement API endpoints specified [here](./src/api/_README.md)
 - Configure [instrumentation.ts](https://nextjs.org/docs/app/guides/instrumentation#importing-files-with-side-effects) (`./instrumentation.ts`)
-  ```typescript
-  export async function register() {
-      await import('reflect-metadata');
-  }
-  ```
+    ```typescript
+    export async function register() {
+        await import('reflect-metadata');
+    }
+    ```
 - Setup [dynamic page](./README_dynamic-page.md)
 - Setup Dependencies (`./Dependencies.ts`)
-  ```typescript
-  import 'reflect-metadata';
-  import { container } from 'tsyringe';
-  import { register as registerOss } from '@merkle-open/magnolia-headless-frontend-nextjs';
-  import registerConfigs from './config/_Dependencies.ts';
-  
-  registerConfigs(container);
-  registerOss(container);
-  
-  export { container };
-  ```
+
+    ```typescript
+    import 'reflect-metadata';
+    import { container } from 'tsyringe';
+    import { register as registerOss } from '@merkle-open/magnolia-headless-frontend-nextjs';
+    import registerConfigs from './config/_Dependencies.ts';
+
+    registerConfigs(container);
+    registerOss(container);
+
+    export { container };
+    ```
+
 - Setup next.config.ts (`./next.config.ts`)
-  ```typescript
-  import type { NextConfig } from 'next';
-  import type { Rewrite } from 'next/dist/lib/load-custom-routes';
-  
-  const nextConfig: NextConfig = {
-      transpilePackages: ['@merkle-open/magnolia-headless-frontend-nextjs'],
-      async rewrites(): Promise<Rewrite[]> {
-          return [
-              {
-                  source: '/robots.txt',
-                  destination: '/api/robots.txt',
-              },
-              {
-                  source: '/:language([a-z]{2})/sitemap/:type',
-                  destination: '/api/:language/sitemap/:type',
-              },
-              {
-                  source: '/:language([a-z]{2})/:path*',
-                  destination: '/dynamic/:language/:path*',
-              },
-          ];
-      },
-      ...
-  };
-  export default nextConfig;
-  ```
+
+    ```typescript
+    import type { NextConfig } from 'next';
+    import type { Rewrite } from 'next/dist/lib/load-custom-routes';
+
+    const nextConfig: NextConfig = {
+        transpilePackages: ['@merkle-open/magnolia-headless-frontend-nextjs'],
+        async rewrites(): Promise<Rewrite[]> {
+            return [
+                {
+                    source: '/robots.txt',
+                    destination: '/api/robots.txt',
+                },
+                {
+                    source: '/:language([a-z]{2})/sitemap/:type',
+                    destination: '/api/:language/sitemap/:type',
+                },
+                {
+                    source: '/:language([a-z]{2})/:path*',
+                    destination: '/dynamic/:language/:path*',
+                },
+            ];
+        },
+        ...
+    };
+    export default nextConfig;
+    ```
+
+## local development
+
+npm link doesn't work with tsyringe, because the app and this lib's tsyringe modules have completely independent (global) variables (see [this comment](https://github.com/microsoft/tsyringe/pull/204#issuecomment-2401656829)).<br>
+workaround using symbolic links:
+
+```json
+{
+  ...
+  "scripts": {
+      "link-local-headlessOss": "npm link @merkle-open/magnolia-headless-frontend-nextjs && APP_DIR=`pwd` && cd node_modules/@merkle-open/magnolia-headless-frontend-nextjs && npm link ${APP_DIR}/node_modules/tsyringe"
+  },
+  ...
+}
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@merkle-open/magnolia-headless-frontend-nextjs",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "Magnolia headless frontend nextJs",
   "license": "MIT",
   "author": "Merkle Inc.",
@@ -37,7 +37,7 @@
     "react": "^19.2",
     "react-dom": "^19.2",
     "reflect-metadata": "^0.2",
-    "tsyringe": "^4.4"
+    "tsyringe": "^4.10"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.3",

package/src/dynamic-page/AbstractDynamicErrorPage.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { ReactNode } from 'react';
 import { ErrorType } from '../helper/MagnoliaPageRestClient.ts';
 import { StaticErrorPage } from '../templates/pages/_error-static/ErrorStatic.tsx';
@@ -11,6 +9,7 @@ import { type StylesheetProviderI } from '../config/StylesheetProvider.ts';
 import { type ComponentMappingsProviderI } from '../config/ComponentMappingsProvider.ts';
 import { ThemeValidator } from '../helper/ThemeValidator.ts';
 import { EditablePage } from '../templates/pages/__magnolia-editable-page/EditablePage.tsx';
+import { injectable } from 'tsyringe';
 
 export abstract class AbstractDynamicErrorPage extends AbstractDynamicPage {
 	private readonly frontendApisProvider: FrontendApiEndpointsProvider;
@@ -29,11 +28,11 @@ export abstract class AbstractDynamicErrorPage extends AbstractDynamicPage {
 		this.frontendApisProvider = configProvider.get().frontendApisProvider;
 	}
 
-	protected async renderDynamic(currentUrl: URL, errorType: ErrorType): Promise<ReactNode> {
+	protected async renderDynamic(currentUrl: URL, errorType: ErrorType, nonce?: string): Promise<ReactNode> {
 		const magnoliaContext = this.magnoliaContextProvider.getMagnoliaContext(currentUrl);
 		const content = await this.fetchErrorPageContent(magnoliaContext.currentLanguage, errorType);
 		if (content) {
-			return super.renderBase(magnoliaContext, content, {});
+			return super.renderBase(magnoliaContext, content, {}, nonce);
 		}
 		return Promise.reject(new Error('no dynamic error page maintained!'));
 	}
@@ -49,3 +48,19 @@ export abstract class AbstractDynamicErrorPage extends AbstractDynamicPage {
 		return fetch(errorPageUrl).then((response) => this.restClient.getJson(errorPageUrl, response));
 	}
 }
+
+@injectable()
+export class ErrorPageLoader {
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	public render(errorType: ErrorType): ReactNode {
+		return <div>Loading...</div>;
+	}
+
+	public renderGlobal(errorType: ErrorType): ReactNode {
+		return (
+			<html>
+				<body>{this.render(errorType)}</body>
+			</html>
+		);
+	}
+}

package/src/dynamic-page/AbstractDynamicPage.tsx

@@ -16,21 +16,20 @@ export abstract class AbstractDynamicPage {
 		private readonly editablePage: EditablePage,
 	) {}
 
-	protected async renderBase(magnoliaContext: ExtendedMagnoliaContext, content: PageProps, templateAnnotations: MgnlTemplateAnnotations): Promise<ReactNode> {
+	protected async renderBase(magnoliaContext: ExtendedMagnoliaContext, content: PageProps, templateAnnotations: MgnlTemplateAnnotations, nonce?: string): Promise<ReactNode> {
 		const config: MagnoliaConfig = {
 			componentMappings: this.componentMappingsProvider.getComponentMappings(),
 		};
 
 		RefService.setMagnoliaContextRef(magnoliaContext);
 		global.mgnlInPageEditor = magnoliaContext.isMagnoliaEdit;
-
 		return (
 			<div>
 				{/* is moved to <head> see https://react.dev/blog/2024/12/05/react-19#support-for-stylesheets */}
 				{this.getStylesheet(magnoliaContext, content).map((stylesheet, index) => (
-					<link rel="stylesheet" key={`AbstractDynamicPage-stylesheet-${index}`} href={stylesheet} precedence="high" />
+					<link rel="stylesheet" key={`AbstractDynamicPage-stylesheet-${index}`} href={stylesheet} precedence="high" nonce={nonce} />
 				))}
-				{await this.editablePage.render({ content, config, templateAnnotations, magnoliaContext })}
+				{await this.editablePage.render({ content, config, templateAnnotations, magnoliaContext, nonce })}
 			</div>
 		);
 	}

package/src/dynamic-page/DynamicErrorPage.tsx

@@ -6,7 +6,7 @@ import { inject, injectable } from 'tsyringe';
 import { RestClient } from '../helper/RestClient.ts';
 import { MagnoliaContextProvider } from '../helper/MagnoliaContextProvider.ts';
 import { type HeadlessConfigProviderI, HEADLESS_CONFIG_PROVIDER_TOKEN } from '../config/ConfigProvider.ts';
-import { AbstractDynamicErrorPage } from './AbstractDynamicErrorPage.tsx';
+import { AbstractDynamicErrorPage, ErrorPageLoader } from './AbstractDynamicErrorPage.tsx';
 
 import { type StylesheetProviderI, STYLESHEET_PROVIDER_TOKEN } from '../config/StylesheetProvider.ts';
 import { type ComponentMappingsProviderI } from '../config/ComponentMappingsProvider.ts';
@@ -14,6 +14,7 @@ import { StaticErrorPage } from '../templates/pages/_error-static/ErrorStatic.ts
 import { CombinedComponentMappingsProvider } from '../templates/ComponentMappingsProvider.ts';
 import { ThemeValidator } from '../helper/ThemeValidator.ts';
 import { EditablePage } from '../templates/pages/__magnolia-editable-page/EditablePage.tsx';
+import { useCspHeaderNonce } from './provider/impl/CspHeaderNonceContext.tsx';
 
 @injectable()
 export class DynamicErrorPage extends AbstractDynamicErrorPage {
@@ -26,23 +27,24 @@ export class DynamicErrorPage extends AbstractDynamicErrorPage {
 		@inject(RestClient) restClient: RestClient,
 		@inject(StaticErrorPage) staticErrorPage: StaticErrorPage,
 		@inject(MagnoliaContextProvider) magnoliaContextProvider: MagnoliaContextProvider,
+		@inject(ErrorPageLoader) private readonly errorPageLoader: ErrorPageLoader,
 	) {
 		super(componentMappingsProvider, configProvider, StylesheetProviderI, themeValidator, editablePage, restClient, staticErrorPage, magnoliaContextProvider);
 	}
 
 	public render(errorType: ErrorType): ReactNode {
 		const [errorPage, setErrorPage] = useState(null);
-
+		const nonce = useCspHeaderNonce();
 		useEffect(() => {
 			const currentUrl = new URL(window.location.href);
 			super
-				.renderDynamic(currentUrl, errorType)
-				.then((content) => setErrorPage(content))
-				.catch(() => setErrorPage(super.renderStatic(this.getLanguage(currentUrl), errorType)));
+				.renderDynamic(currentUrl, errorType, nonce)
+				.catch(() => super.renderStatic(this.getLanguage(currentUrl), errorType))
+				.then((content) => setErrorPage(content));
 		}, []);
 
 		if (!errorPage) {
-			return <div>Loading...</div>;
+			return this.errorPageLoader.render(errorType);
 		}
 		return errorPage;
 	}

package/src/dynamic-page/DynamicErrorPageGlobal.tsx

@@ -4,7 +4,7 @@ import { ReactNode, useEffect, useState } from 'react';
 import { ErrorType } from '../helper/MagnoliaPageRestClient.ts';
 import { inject, injectable } from 'tsyringe';
 import { DynamicPageLayout } from './DynamicPageLayout.tsx';
-import { AbstractDynamicErrorPage } from './AbstractDynamicErrorPage.tsx';
+import { AbstractDynamicErrorPage, ErrorPageLoader } from './AbstractDynamicErrorPage.tsx';
 import { type HeadlessConfigProviderI, HEADLESS_CONFIG_PROVIDER_TOKEN } from '../config/ConfigProvider.ts';
 import { RestClient } from '../helper/RestClient.ts';
 import { MagnoliaContextProvider } from '../helper/MagnoliaContextProvider.ts';
@@ -15,6 +15,7 @@ import { StaticErrorPage } from '../templates/pages/_error-static/ErrorStatic.ts
 import { CombinedComponentMappingsProvider } from '../templates/ComponentMappingsProvider.ts';
 import { ThemeValidator } from '../helper/ThemeValidator.ts';
 import { EditablePage } from '../templates/pages/__magnolia-editable-page/EditablePage.tsx';
+import { useCspHeaderNonce } from './provider/impl/CspHeaderNonceContext.tsx';
 
 @injectable()
 export class DynamicErrorPageGlobal extends AbstractDynamicErrorPage {
@@ -28,42 +29,32 @@ export class DynamicErrorPageGlobal extends AbstractDynamicErrorPage {
 		@inject(StaticErrorPage) staticErrorPage: StaticErrorPage,
 		@inject(MagnoliaContextProvider) magnoliaContextProvider: MagnoliaContextProvider,
 		@inject(DynamicPageLayout) private readonly dynamicPageLayout: DynamicPageLayout,
+		@inject(ErrorPageLoader) private readonly errorPageLoader: ErrorPageLoader,
 	) {
 		super(componentMappingsProvider, configProvider, StylesheetProviderI, themeValidator, editablePage, restClient, staticErrorPage, magnoliaContextProvider);
 	}
 
 	public render(errorType: ErrorType): ReactNode {
 		const [errorPage, setErrorPage] = useState(null);
-
+		const nonce = useCspHeaderNonce();
 		useEffect(() => {
 			const language = this.getLanguage();
-			this.renderGlobalDynamicError(language, errorType)
+			this.renderGlobalDynamicError(language, errorType, nonce)
 				.then((content) => setErrorPage(content))
 				.catch(() => setErrorPage(this.renderGlobalStaticError(language, errorType)));
 		}, []);
 
 		if (!errorPage) {
-			return this.renderLoader(errorType);
+			return this.errorPageLoader.renderGlobal(errorType);
 		}
 		return errorPage;
 	}
 
-	// eslint-disable-next-line @typescript-eslint/no-unused-vars
-	protected renderLoader(errorType: ErrorType): ReactNode {
-		return (
-			<html>
-				<body>
-					<div>Loading...</div>
-				</body>
-			</html>
-		);
-	}
-
-	private async renderGlobalDynamicError(language: string, errorType: ErrorType): Promise<ReactNode> {
+	private async renderGlobalDynamicError(language: string, errorType: ErrorType, nonce: string): Promise<ReactNode> {
 		try {
 			const currentUrl = new URL(window.location.href);
 			currentUrl.pathname = language;
-			return super.renderDynamic(currentUrl, errorType).then((errorPage) => this.dynamicPageLayout.render(language, errorPage));
+			return super.renderDynamic(currentUrl, errorType, nonce).then((errorPage) => this.dynamicPageLayout.render(language, errorPage));
 		} catch (e) {
 			return Promise.reject(e);
 		}

package/src/dynamic-page/DynamicPage.tsx

@@ -15,20 +15,22 @@ import { type ComponentMappingsProviderI } from '../config/ComponentMappingsProv
 import { CombinedComponentMappingsProvider } from '../templates/ComponentMappingsProvider.ts';
 import { ThemeValidator } from '../helper/ThemeValidator.ts';
 import { EditablePage } from '../templates/pages/__magnolia-editable-page/EditablePage.tsx';
+import { ContentSecurityPolicyNonceProvider } from '../middleware/impl/ContentSecurityPolicyNonceMiddleware.ts';
 
 @injectable()
 export class DynamicPage extends AbstractDynamicPage {
 	constructor(
 		@inject(CombinedComponentMappingsProvider) componentMappingsProvider: ComponentMappingsProviderI,
-		@inject(STYLESHEET_PROVIDER_TOKEN) StylesheetProviderI: StylesheetProviderI,
+		@inject(STYLESHEET_PROVIDER_TOKEN) stylesheetProviderI: StylesheetProviderI,
 		@inject(ThemeValidator) themeValidator: ThemeValidator,
 		@inject(EditablePage) editablePage: EditablePage,
+		@inject(ContentSecurityPolicyNonceProvider) private readonly cspNonceProvider: ContentSecurityPolicyNonceProvider,
 		@inject(MagnoliaContextProvider) private readonly magnoliaContextProvider: MagnoliaContextProvider,
 		@inject(MagnoliaPageRestClient) private readonly magnoliaPageRestClient: MagnoliaPageRestClient,
 		@inject(MetadataProvider) private readonly metadataProvider: MetadataProvider,
 		@inject(UrlProvider) private readonly urlProvider: UrlProvider,
 	) {
-		super(componentMappingsProvider, StylesheetProviderI, themeValidator, editablePage);
+		super(componentMappingsProvider, stylesheetProviderI, themeValidator, editablePage);
 	}
 
 	public async render(pageProps: PageProps): Promise<ReactNode> {
@@ -39,7 +41,8 @@ export class DynamicPage extends AbstractDynamicPage {
 		}
 		const templateAnnotations: MgnlTemplateAnnotations = await this.magnoliaPageRestClient.getTemplateAnnotations(url, content['@path']);
 		const magnoliaContext = this.magnoliaContextProvider.getMagnoliaContext(url);
-		return super.renderBase(magnoliaContext, content, templateAnnotations);
+		const nonce = await this.cspNonceProvider.get();
+		return super.renderBase(magnoliaContext, content, templateAnnotations, nonce);
 	}
 
 	public async generateMetadata(pageProps: PageProps): Promise<Metadata> {

package/src/dynamic-page/DynamicPageLayout.tsx

@@ -2,6 +2,7 @@ import React, { ReactNode } from 'react';
 import { inject, injectable } from 'tsyringe';
 import { MagnoliaContextProvider } from '../helper/MagnoliaContextProvider.ts';
 import { UrlProvider, Params } from './PageProps.ts';
+import { ComposedContextProvider } from './provider/Provider.tsx';
 
 export interface Props {
 	children: ReactNode;
@@ -13,6 +14,7 @@ export class DynamicPageLayout {
 	constructor(
 		@inject(MagnoliaContextProvider) private readonly magnoliaContextProvider: MagnoliaContextProvider,
 		@inject(UrlProvider) private readonly urlProvider: UrlProvider,
+		@inject(ComposedContextProvider) private readonly composedProvider: ComposedContextProvider,
 	) {}
 
 	public async renderUrl(props: Props): Promise<ReactNode> {
@@ -20,7 +22,7 @@ export class DynamicPageLayout {
 			params: props.params,
 		});
 		const magnoliaContext = this.magnoliaContextProvider.getMagnoliaContext(url);
-		return this.render(magnoliaContext.currentLanguage, props.children);
+		return this.composedProvider.render({ childrenProvider: () => this.render(magnoliaContext.currentLanguage, props.children) });
 	}
 
 	public render(language: string, children: ReactNode): ReactNode {

package/src/dynamic-page/PageProps.ts

@@ -1,5 +1,3 @@
-// @ts-expect-error: Next.js missing exports prevents ESM resolution with 'nodenext'.
-import { headers } from 'next/headers';
 import { injectable } from 'tsyringe';
 
 export type SearchParams = Record<string, string | string[]>;
@@ -14,9 +12,10 @@ export default interface PageProps {
 @injectable()
 export class UrlProvider {
 	public async getUrl(props: PageProps): Promise<URL> {
-		const headersList = await headers();
+		// @ts-expect-error: Next.js missing exports prevents ESM resolution with 'nodenext'.
+		const headerList = await import('next/headers').then((headers) => headers.headers());
 		const { pathname } = await props.params;
-		const url = new URL(`https://${headersList.get('host')}/${pathname.join('/')}`);
+		const url = new URL(`https://${headerList.get('host')}/${(pathname || [])?.join('/')}`);
 		const queryParams = props ? await props.searchParams : null;
 		if (queryParams) {
 			url.search = this.toUrlSearchParams(queryParams).toString();

package/src/dynamic-page/_Dependencies.ts

@@ -4,6 +4,8 @@ import { DynamicPage } from './DynamicPage.tsx';
 import { DynamicErrorPageGlobal } from './DynamicErrorPageGlobal.tsx';
 import { DynamicPageLayout } from './DynamicPageLayout.tsx';
 import { UrlProvider } from './PageProps.ts';
+import { ErrorPageLoader } from './AbstractDynamicErrorPage.tsx';
+import registerProvider from './provider/_Dependencies.ts';
 
 export default function register(container: DependencyContainer) {
 	container.register(DynamicErrorPage, { useClass: DynamicErrorPage });
@@ -11,4 +13,7 @@ export default function register(container: DependencyContainer) {
 	container.register(DynamicPage, { useClass: DynamicPage });
 	container.register(DynamicPageLayout, { useClass: DynamicPageLayout });
 	container.register(UrlProvider, { useClass: UrlProvider });
+	container.register(ErrorPageLoader, { useClass: ErrorPageLoader });
+
+	registerProvider(container);
 }

package/src/dynamic-page/_Index.ts

@@ -1,5 +1,7 @@
 export * from './DynamicErrorPageGlobal.tsx';
 export * from './DynamicErrorPage.tsx';
+export { ErrorPageLoader } from './AbstractDynamicErrorPage.tsx';
 export * from './DynamicPage.tsx';
 export * from './DynamicPageLayout.tsx';
-export type { default as PageProps } from './PageProps.ts';
+export { UrlProvider, type default as PageProps } from './PageProps.ts';
+export * from './provider/_Index.ts';

package/src/dynamic-page/provider/Provider.tsx

@@ -0,0 +1,56 @@
+import { ReactNode } from 'react';
+import { inject, injectable, injectAllWithTransform } from 'tsyringe';
+import { token } from '../../Constants.ts';
+import { Logger } from '../../helper/Logger.ts';
+// @ts-expect-error: tsyringe missing exports prevents ESM resolution with 'nodenext'.
+import { Transform } from 'tsyringe/dist/typings/types/index.d.ts';
+
+export interface Props {
+	childrenProvider: () => ReactNode;
+}
+export interface ContextProvider {
+	render(props: Props): Promise<ReactNode>;
+	getOrder(): number;
+	getName(): string;
+}
+
+export const CONTEXT_PROVIDER_TOKEN = token('ContextProvider');
+
+class ProviderTransform implements Transform<ContextProvider[], ContextProvider[]> {
+	public transform(providers: ContextProvider[]): ContextProvider[] {
+		return providers.sort((p1, p2) => p1.getOrder() - p2.getOrder());
+	}
+}
+
+@injectable()
+export class ComposedContextProvider {
+	constructor(
+		@injectAllWithTransform(CONTEXT_PROVIDER_TOKEN, ProviderTransform) private readonly providers: ContextProvider[],
+		@inject(Logger) private readonly logger: Logger,
+	) {}
+
+	public async render(props: Props): Promise<ReactNode> {
+		return this.renderProvider(this.providers, props);
+	}
+
+	private async renderProvider(providers: ContextProvider[], props: Props) {
+		if (providers.length > 0) {
+			const [provider, ...rest] = providers;
+			return this.renderProviderSafe(provider, props).then((rendered) =>
+				this.renderProvider(rest, {
+					childrenProvider: () => rendered,
+				}),
+			);
+		}
+		return Promise.resolve(props.childrenProvider());
+	}
+
+	private async renderProviderSafe(provider: ContextProvider, props: Props): Promise<ReactNode> {
+		try {
+			return provider.render(props);
+		} catch (e) {
+			this.logger.error(`failed to render provider ${provider.getName()} with order:${provider.getOrder()}, skipping... error: ${e}`);
+			return Promise.resolve(props.childrenProvider());
+		}
+	}
+}

package/src/dynamic-page/provider/_Dependencies.ts

@@ -0,0 +1,8 @@
+import { ComposedContextProvider, CONTEXT_PROVIDER_TOKEN } from './Provider.tsx';
+import { CspHeaderNonceProvider } from './impl/CspHeaderNonce.tsx';
+import { DependencyContainer } from 'tsyringe';
+
+export default function register(container: DependencyContainer) {
+	container.register(ComposedContextProvider, { useClass: ComposedContextProvider });
+	container.register(CONTEXT_PROVIDER_TOKEN, { useClass: CspHeaderNonceProvider });
+}

package/src/dynamic-page/provider/_Index.ts

@@ -0,0 +1 @@
+export { ComposedContextProvider, type ContextProvider, type Props as ContextProviderProps, CONTEXT_PROVIDER_TOKEN } from './Provider.tsx';

package/src/dynamic-page/provider/_README.md

@@ -0,0 +1,71 @@
+# Context Provider
+
+The provider composer executes all providers based on their getOrder() value. It is used in the dynamicPageLayout.
+
+<b>Providers are not applied for global error and global not found pages (due to NextJs only allowing client components)!!<b>
+
+## Provided providers
+
+| Provider       | order | description                   |
+| -------------- | ----- | ----------------------------- |
+| CspHeaderNonce | 100   | Provides the csp header nonce |
+
+## Implement custom provider
+
+`/app/dynamic/[..pathname]/provider/SomeContext.tsx`
+
+```typescript
+'use client';
+import React, { createContext, ReactNode, useContext } from 'react';
+
+const SomeContext = createContext<string | undefined>(undefined);
+
+interface Props {
+    value?: string;
+    children: ReactNode;
+}
+
+export function Provider({ value, children }: Props) {
+    return <SomeContext value={value}>{children}</SomeContext>;
+}
+
+export const useSomeContext = () => useContext(SomeContext);
+
+```
+
+`/app/dynamic/[..pathname]/provider/SomeProvider.tsx`
+
+```typescript
+import React, {ReactNode} from 'react';
+import {inject, injectable} from 'tsyringe';
+import {Provider, Props} from '../Provider.tsx';
+import {ContextProvider, ContextProviderProps} from '@merkle-open/magnolia-headless-frontend-nextjs';
+import {Provider as Delegate} from './SomeContext.tsx';
+
+@injectable()
+export class SomeContextProvider implements ContextProvider {
+
+    public async render({childrenProvider}: ContextProviderProps): Promise<ReactNode> {
+        return <Delegate value = {"someContextValue"} > {childrenProvider()} < /Delegate>;
+    }
+
+    getOrder(): number {
+        return 200;
+    }
+
+    getName(): string {
+        return 'SomeProvider';
+    }
+}
+```
+
+Add binding:
+
+```typescript
+import { CONTEXT_PROVIDER_TOKEN } from '@merkle-open/magnolia-headless-frontend-nextjs';
+import { DependencyContainer } from 'tsyringe';
+
+function bindSomeContextProvider(container: DependencyContainer): void {
+    container.register(CONTEXT_PROVIDER_TOKEN, {useClass: SomeContextProvider});
+}
+```

package/src/dynamic-page/provider/impl/CspHeaderNonce.tsx

@@ -0,0 +1,22 @@
+import React, { ReactNode } from 'react';
+import { inject, injectable } from 'tsyringe';
+import { ContentSecurityPolicyNonceProvider } from '../../../middleware/impl/ContentSecurityPolicyNonceMiddleware.ts';
+import { ContextProvider, Props } from '../Provider.tsx';
+import { Provider as Delegate } from './CspHeaderNonceContext.tsx';
+
+@injectable()
+export class CspHeaderNonceProvider implements ContextProvider {
+	constructor(@inject(ContentSecurityPolicyNonceProvider) private readonly cspNonceProvider: ContentSecurityPolicyNonceProvider) {}
+
+	public async render({ childrenProvider }: Props): Promise<ReactNode> {
+		const nonce = await this.cspNonceProvider.get();
+		return <Delegate value={nonce}>{childrenProvider()}</Delegate>;
+	}
+
+	getOrder(): number {
+		return 100;
+	}
+	getName(): string {
+		return 'CspHeaderNonce';
+	}
+}

package/src/dynamic-page/provider/impl/CspHeaderNonceContext.tsx

@@ -0,0 +1,16 @@
+'use client';
+
+import React, { createContext, ReactNode, useContext } from 'react';
+
+const CspHeaderNonceContext = createContext<string | undefined>(undefined);
+
+interface Props {
+	value?: string;
+	children: ReactNode;
+}
+
+export function Provider({ value, children }: Props) {
+	return <CspHeaderNonceContext value={value}>{children}</CspHeaderNonceContext>;
+}
+
+export const useCspHeaderNonce = () => useContext(CspHeaderNonceContext);

package/src/helper/MetadataProvider.ts

@@ -18,8 +18,8 @@ export class MetadataProvider {
 			keywords: meta.keywords,
 			robots: meta.robots,
 			applicationName: meta.openGraph?.siteName,
-			openGraph: this.getOpenGraph(meta.openGraph),
-			twitter: this.getTwitter(meta.openGraph),
+			openGraph: meta.openGraph ? this.getOpenGraph(meta.openGraph) : undefined,
+			twitter: meta.openGraph ? this.getTwitter(meta.openGraph) : undefined,
 			alternates: {
 				canonical: meta.canonical,
 				languages: Object.fromEntries(meta.hrefLangLinks.map((link) => [link.language, link.href])),

package/src/helper/_Index.ts

@@ -1,5 +1,5 @@
 export { ErrorType } from './MagnoliaPageRestClient.ts';
-export { type ExtendedMagnoliaContext } from './MagnoliaContextProvider.ts';
+export * from './MagnoliaContextProvider.ts';
 export * from './BasicAuth.ts';
 export * from './BrowserLanguageProvider.ts';
 export * from './Logger.ts';

package/src/templates/areas/__magnolia-editable-area/EditableArea.tsx

@@ -23,7 +23,11 @@ export class EditableAreaClass {
 	}
 
 	protected renderComponent(content: any, index: number): ReactNode {
-		return this.editableComponent.render({ key: ContentRendererService.buildKey(content), content: content, index: index });
+		return this.editableComponent.render({
+			key: ContentRendererService.buildKey(content),
+			content,
+			index,
+		});
 	}
 
 	protected merge(...content: any[]): any {

package/src/templates/components/__magnolia-editable-component/EditableComponent.tsx

@@ -6,13 +6,14 @@ import ErrorBoundary from '../../elements/_error/ErrorBoundary.tsx';
 
 export class EditableComponent {
 	public render(props: EditableComponentProps): ReactNode {
-		const { key, content, additionalContent } = props;
+		const { key, content, additionalContent, index, ...rest } = props;
 		const magnoliaContext: IMagnoliaContext = RefService.getMagnoliaContextRef<IMagnoliaContext>();
 		const mergedContent: MgnlContent = this.merge(content, additionalContent);
+		const resolvedKey = key ?? content?.['@path'] ?? index;
 
 		return (
-			<ErrorBoundary isEditMode={magnoliaContext.isMagnoliaEdit} throwNotEditMode={false} path={content!['@path']} key={`error-${key}`}>
-				<MagnoliaEditableComponent {...props} content={mergedContent} />
+			<ErrorBoundary isEditMode={magnoliaContext?.isMagnoliaEdit ?? false} throwNotEditMode={false} path={content!['@path']} key={`error-${resolvedKey}`}>
+				<MagnoliaEditableComponent {...rest} key={resolvedKey} content={mergedContent} />
 			</ErrorBoundary>
 		);
 	}

package/src/templates/pages/BaseProps.ts

@@ -19,7 +19,7 @@ export interface MetaProps {
 	keywords: string[];
 	robots?: string;
 	canonical: string;
-	openGraph: OpenGraph;
+	openGraph?: OpenGraph;
 	hrefLangLinks: HrefLangLink[];
 	favicons?: {
 		favicon?: string;

package/src/templates/pages/__magnolia-editable-page/EditablePageProps.ts

@@ -9,4 +9,5 @@ export default interface EditablePageProps {
 	templateAnnotations: MgnlTemplateAnnotations;
 	config: MagnoliaConfig;
 	magnoliaContext: IMagnoliaContext;
+	nonce?: string;
 }

package/src/templates/pages/_error-static/ErrorStatic.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import React, { ReactNode } from 'react';
 import ErrorStaticProps from './ErrorStaticProps.ts';
 import { injectable } from 'tsyringe';