npm - @merkle-open/magnolia-headless-frontend-nextjs - Versions diffs - 0.0.6 → 0.0.7 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (18) hide show

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@merkle-open/magnolia-headless-frontend-nextjs",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "Magnolia headless frontend nextJs",
   "license": "MIT",
   "author": "Merkle Inc.",

package/src/api/ErrorPageApi.ts CHANGED Viewed

@@ -11,12 +11,15 @@ export class ErrorPageApi {
 		const queryParams = req.nextUrl.searchParams;
 		const url = new URL(`https://${req.headers.get('host')}/${language}`);
 		const errorType = this.getErrorTypeFromString(queryParams.get('errorType'));
-		const headers = new Headers();
-		headers.set('Content-Type', 'application/json');
-		return this.magnoliaPageRestClient
-			.getErrorPageContent(url, errorType)
-			.then((content) => JSON.stringify(content))
-			.then((body) => new Response(body, { headers: headers }));
+		return this.magnoliaPageRestClient.getErrorPageContent(url, errorType).then((content) => {
+			if (content) {
+				const headers = new Headers();
+				headers.set('Content-Type', 'application/json');
+				return new Response(JSON.stringify(content), { headers: headers });
+			}
+			return new Response(null, { status: 404 });
+		});
 	}
 	private getErrorTypeFromString(value: string): ErrorType | undefined {

package/src/config/ConfigProvider.ts CHANGED Viewed

@@ -4,7 +4,7 @@ export interface MagnoliaApiEndpointsProvider {
 	annotationTemplates(): string;
 	pageContent(language: string): string;
 	errorPageContent(language: string): string;
-	dynamicResponseHeader(): string;
+	dynamicHeader(): string;
 	vanity(language: string): string;
 	robots(): string;
 	sitemap(language: string): string;

package/src/dynamic-page/AbstractDynamicErrorPage.tsx CHANGED Viewed

@@ -32,7 +32,10 @@ export abstract class AbstractDynamicErrorPage extends AbstractDynamicPage {
 	protected async renderDynamic(currentUrl: URL, errorType: ErrorType): Promise<ReactNode> {
 		const magnoliaContext = this.magnoliaContextProvider.getMagnoliaContext(currentUrl);
 		const content = await this.fetchErrorPageContent(magnoliaContext.currentLanguage, errorType);
-		return super.renderBase(magnoliaContext, content, {});
+		if (content) {
+			return super.renderBase(magnoliaContext, content, {});
+		}
+		return Promise.reject(new Error('no dynamic error page maintained!'));
 	}
 	protected renderStatic(language: string, errorType: ErrorType): ReactNode {

package/src/dynamic-page/AbstractDynamicPage.tsx CHANGED Viewed

@@ -16,7 +16,7 @@ export abstract class AbstractDynamicPage {
 		private readonly editablePage: EditablePage,
 	) {}
-	protected renderBase(magnoliaContext: ExtendedMagnoliaContext, content: PageProps, templateAnnotations: MgnlTemplateAnnotations): ReactNode {
+	protected async renderBase(magnoliaContext: ExtendedMagnoliaContext, content: PageProps, templateAnnotations: MgnlTemplateAnnotations): Promise<ReactNode> {
 		const config: MagnoliaConfig = {
 			componentMappings: this.componentMappingsProvider.getComponentMappings(),
 		};
@@ -27,10 +27,10 @@ export abstract class AbstractDynamicPage {
 		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) => (
-					<link rel="stylesheet" href={stylesheet} precedence="high" />
+				{this.getStylesheet(magnoliaContext, content).map((stylesheet, index) => (
+					<link rel="stylesheet" key={`AbstractDynamicPage-stylesheet-${index}`} href={stylesheet} precedence="high" />
 				))}
-				{this.editablePage.render({ content, config, templateAnnotations, magnoliaContext })}
+				{await this.editablePage.render({ content, config, templateAnnotations, magnoliaContext })}
 			</div>
 		);
 	}

package/src/dynamic-page/DynamicErrorPageGlobal.tsx CHANGED Viewed

@@ -60,10 +60,13 @@ export class DynamicErrorPageGlobal extends AbstractDynamicErrorPage {
 	}
 	private async renderGlobalDynamicError(language: string, errorType: ErrorType): Promise<ReactNode> {
-		const currentUrl = new URL(window.location.href);
-		currentUrl.pathname = language;
-		const errorPage = await super.renderDynamic(currentUrl, errorType);
-		return this.dynamicPageLayout.render(language, errorPage);
+		try {
+			const currentUrl = new URL(window.location.href);
+			currentUrl.pathname = language;
+			return super.renderDynamic(currentUrl, errorType).then((errorPage) => this.dynamicPageLayout.render(language, errorPage));
+		} catch (e) {
+			return Promise.reject(e);
+		}
 	}
 	private renderGlobalStaticError(language: string, errorType: ErrorType): ReactNode {

package/src/helper/MetadataProvider.ts CHANGED Viewed

@@ -24,6 +24,15 @@ export class MetadataProvider {
 				canonical: meta.canonical,
 				languages: Object.fromEntries(meta.hrefLangLinks.map((link) => [link.language, link.href])),
 			},
+			...(meta.favicons && {
+				icons: {
+					icon: [
+						meta.favicons.faviconLegacy && { url: meta.favicons.faviconLegacy, sizes: '32x32' },
+						meta.favicons.favicon && { url: meta.favicons.favicon, type: 'image/svg+xml' },
+					].filter(Boolean),
+					apple: [meta.favicons.appleTouchIcon && { url: meta.favicons.appleTouchIcon, sizes: '180x180' }].filter(Boolean),
+				},
+			}),
 		};
 	}

package/src/middleware/Middleware.ts CHANGED Viewed

@@ -1,7 +1,5 @@
 // @ts-expect-error: Next.js missing exports prevents ESM resolution with 'nodenext'.
 import { NextFetchEvent, NextProxy, NextRequest, NextResponse } from 'next/server';
-// @ts-expect-error: Next.js missing exports prevents ESM resolution with 'nodenext'.
-import { NextMiddlewareResult } from 'next/dist/server/web/types';
 import { Logger } from '../helper/Logger.ts';
 import { inject, injectable, injectAllWithTransform } from 'tsyringe';
 // @ts-expect-error: tsyringe missing exports prevents ESM resolution with 'nodenext'.
@@ -10,15 +8,23 @@ import { Transform } from 'tsyringe/dist/typings/types';
 import { token } from '../Constants.ts';
 export interface Middleware {
-	apply(request: NextRequest, response: NextResponse, event: NextFetchEvent): NextMiddlewareResult | Promise<NextMiddlewareResult>;
+	apply(request: NextRequest, response: MiddlewareNextResponse, event: NextFetchEvent): Promise<MiddlewareResult>;
 	getOrder(): number;
 	getName(): string;
 }
+export interface MiddlewareResult {
+	response: MiddlewareNextResponse;
+	break?: boolean;
+}
+export interface MiddlewareNextResponse extends NextResponse, Response {
+	requestHeaders: Headers;
+}
 export const MIDDLEWARE_TOKEN = token('Middleware');
 export abstract class AbstractMiddleware implements Middleware {
-	public abstract apply(request: NextRequest, response: NextResponse, event: NextFetchEvent): NextMiddlewareResult | Promise<NextMiddlewareResult>;
+	public abstract apply(request: NextRequest, response: MiddlewareNextResponse, event: NextFetchEvent): Promise<MiddlewareResult>;
 	public abstract getOrder(): number;
 	public abstract getName(): string;
@@ -40,26 +46,60 @@ class MiddlewareTransform implements Transform<Middleware[], Middleware[]> {
 @injectable()
 export class MiddlewareComposer {
 	constructor(
-		@injectAllWithTransform(MIDDLEWARE_TOKEN, MiddlewareTransform) private middlewares: Middleware[],
-		@inject(Logger) private logger: Logger,
+		@injectAllWithTransform(MIDDLEWARE_TOKEN, MiddlewareTransform) private readonly middlewares: Middleware[],
+		@inject(Logger) private readonly logger: Logger,
 	) {}
 	public composeMiddleware(): NextProxy {
-		const middlewares = this.middlewares;
-		const logger = this.logger;
-		return async function middleware(request: NextRequest, event: NextFetchEvent): Promise<NextMiddlewareResult> {
-			const response = NextResponse.next();
-			for (const middleware of middlewares) {
-				try {
-					const result = await middleware.apply(request, response, event);
-					if (result instanceof NextResponse || result instanceof Response) {
-						return result;
-					}
-				} catch (e) {
-					logger.error(`failed to execute middleware ${middleware.getName()} with order:${middleware.getOrder()}, skipping... error: ${e}`);
-				}
-			}
-			return response;
+		const composedMiddleware = new ComposedMiddleware(this.middlewares, this.logger);
+		return async function middleware(request: NextRequest, event: NextFetchEvent): Promise<NextResponse> {
+			return composedMiddleware.apply(request, event);
 		};
 	}
 }
+class ComposedMiddleware {
+	constructor(
+		private readonly middlewares: Middleware[],
+		private readonly logger: Logger,
+	) {}
+	public async apply(request: NextRequest, event: NextFetchEvent): Promise<NextResponse> {
+		const requestHeaders = new Headers(request.headers);
+		const response: MiddlewareNextResponse = NextResponse.next({
+			request: {
+				headers: requestHeaders,
+			},
+		});
+		response.requestHeaders = requestHeaders;
+		return this.triggerMiddleware(this.middlewares, request, response, event).then((result) => result.response);
+	}
+	private async triggerMiddleware(middlewares: Middleware[], request: NextRequest, response: MiddlewareNextResponse, event: NextFetchEvent): Promise<MiddlewareResult> {
+		if (middlewares.length > 0) {
+			const [middleware, ...rest] = middlewares;
+			return this.triggerMiddlewareSafe(middleware, request, response, event).then((result) => {
+				if (!result.break) {
+					return this.triggerMiddleware(rest, request, result.response, event);
+				}
+				return Promise.resolve(result);
+			});
+		}
+		return Promise.resolve({
+			response: response,
+			break: false,
+		});
+	}
+	private async triggerMiddlewareSafe(middleware: Middleware, request: NextRequest, response: MiddlewareNextResponse, event: NextFetchEvent): Promise<MiddlewareResult> {
+		try {
+			return middleware.apply(request, response, event);
+		} catch (e) {
+			this.logger.error(`failed to execute middleware ${middleware.getName()} with order:${middleware.getOrder()}, skipping... error: ${e}`);
+			return Promise.resolve({
+				response: response,
+				break: false,
+			});
+		}
+	}
+}

package/src/middleware/_Dependencies.ts CHANGED Viewed

@@ -1,12 +1,15 @@
 import { DependencyContainer } from 'tsyringe';
-import { DynamicResponseHeaderMiddleware } from './impl/DynamicResponseHeaderMiddleware.ts';
+import { DynamicHeaderMiddleware } from './impl/DynamicHeaderMiddleware.ts';
 import { I18nRedirectMiddleware } from './impl/I18nRedirectMiddleware.ts';
 import { VanityMiddleware } from './impl/VanityMiddleware.ts';
+import { ContentSecurityPolicyNonceMiddleware, ContentSecurityPolicyNonceProvider } from './impl/ContentSecurityPolicyNonceMiddleware.ts';
 import { MiddlewareComposer, MIDDLEWARE_TOKEN } from './Middleware.ts';
 export default function register(container: DependencyContainer) {
-	container.register(MIDDLEWARE_TOKEN, { useClass: DynamicResponseHeaderMiddleware });
+	container.register(MIDDLEWARE_TOKEN, { useClass: DynamicHeaderMiddleware });
 	container.register(MIDDLEWARE_TOKEN, { useClass: I18nRedirectMiddleware });
 	container.register(MIDDLEWARE_TOKEN, { useClass: VanityMiddleware });
+	container.register(MIDDLEWARE_TOKEN, { useClass: ContentSecurityPolicyNonceMiddleware });
 	container.register(MiddlewareComposer, { useClass: MiddlewareComposer });
+	container.register(ContentSecurityPolicyNonceProvider, { useClass: ContentSecurityPolicyNonceProvider });
 }

package/src/middleware/_Index.ts CHANGED Viewed

	@@ -1 +1,2 @@
1 1	export * from './Middleware.ts';
2	+ export { ContentSecurityPolicyNonceProvider } from './impl/ContentSecurityPolicyNonceMiddleware.ts';

package/src/middleware/_README.md CHANGED Viewed

@@ -1,20 +1,19 @@
 # Proxy/Middleware
-The middleware composer executes all middlewares based on their getOrder() value until the first one returns a response.
+The middleware composer executes all middlewares based on their getOrder() value until the first one returns a result with break=true.
 ## Configure Middleware Composer
 `/proxy.ts` [see nextJs docu](https://nextjs.org/docs/app/getting-started/proxy)
 ```typescript
-import 'reflect-metadata';
 import { container } from './app/Dependencies';
 import { NextProxy, NextRequest } from 'next/server';
 import { NextMiddlewareResult } from 'next/dist/server/web/types';
 import type { NextFetchEvent } from 'next/dist/server/web/spec-extension/fetch-event';
-import { MiddlewareComposer } from '@merkle/magnolia-headless-frontend-nextjs/src/middleware/Middleware.ts';
+import { MiddlewareComposer } from '@merkle-open/magnolia-headless-frontend-nextjs';
-const middleware: NextProxy = container.resolve<MiddlewareComposer>('MiddlewareComposer').composeMiddleware();
+const middleware: NextProxy = container.resolve<MiddlewareComposer>(MiddlewareComposer).composeMiddleware();
 export async function proxy(request: NextRequest, event: NextFetchEvent): Promise<NextMiddlewareResult> {
     return middleware(request, event);
@@ -23,39 +22,46 @@ export async function proxy(request: NextRequest, event: NextFetchEvent): Promis
 ## Provided middlewares
-| Middleware            | order |
-| --------------------- | ----- |
-| I18nRedirect          | 100   |
-| DynamicResponseHeader | 200   |
-| Vanity                | 300   |
+| Middleware    | order | description                                                    |
+| ------------- | ----- | -------------------------------------------------------------- |
+| I18nRedirect  | 100   | redirects to browser lang if url doesn't contain language      |
+| DynamicHeader | 200   | sets request/response headers provided by backend endpoint     |
+| Vanity        | 300   | redirects/forwards based on backend endpoint                   |
+| CSP-nonce     | 1000  | generates nonce and replaces csp header '${nonce}' placeholder |
 ## Implement custom middleware
 `/app/middlewares/SomeMiddleware.ts`
 ```typescript
-import { NextRequest, NextResponse } from 'next/server';
-import { NextMiddlewareResult } from 'next/dist/server/web/types';
-import { AbstractMiddleware } from './Middleware.ts';
-import { inject, injectable } from 'tsyringe';
+import {NextRequest, NextResponse} from 'next/server';
+import {NextMiddlewareResult} from 'next/dist/server/web/types';
+import {inject, injectable} from 'tsyringe';
+import { AbstractMiddleware, MiddlewareNextResponse, MiddlewareResult } from '@merkle-open/magnolia-headless-frontend-nextjs';
 @injectable()
 export class SomeMiddleware extends AbstractMiddleware {
     constructor() {
         super();
     }
     public getOrder(): number {
         return 301;
     }
     public getName(): string {
         return 'SomeMiddleware';
     }
-    public async apply(req: NextRequest): Promise<NextMiddlewareResult> {
+    public async apply(req: NextRequest, res: MiddlewareNextResponse): Promise<MiddlewareResult> {
         if (super.isPagePathRequest(req)) {
             // will break chain
-            return NextResponse.redirect(new URL('someDestination'));
+            return Promise.resolve({
+                response: NextResponse.redirect(new URL('someDestination')),
+                break: true
+            });
         }
+        return Promise.resolve({response: res});
     }
 }
 ```

package/src/middleware/impl/ContentSecurityPolicyNonceMiddleware.ts ADDED Viewed

@@ -0,0 +1,56 @@
+// @ts-expect-error: Next.js missing exports prevents ESM resolution with 'nodenext'.
+import { NextRequest } from 'next/server';
+import { AbstractMiddleware, MiddlewareNextResponse, MiddlewareResult } from '../Middleware.ts';
+import { injectable } from 'tsyringe';
+const CSP_HEADER_KEY = 'Content-Security-Policy';
+const NONCE_HEADER_KEY = 'x-nonce';
+// see https://nextjs.org/docs/app/guides/content-security-policy#how-nonces-work-in-nextjs
+@injectable()
+export class ContentSecurityPolicyNonceMiddleware extends AbstractMiddleware {
+	constructor() {
+		super();
+	}
+	public getOrder(): number {
+		return 1000;
+	}
+	public getName(): string {
+		return 'CSP-nonce';
+	}
+	public async apply(_req: NextRequest, res: MiddlewareNextResponse): Promise<MiddlewareResult> {
+		if (res.headers.has(CSP_HEADER_KEY)) {
+			const nonce = this.generateNonce();
+			const cspHeader = this.replacePlaceholder(res.headers.get(CSP_HEADER_KEY), nonce);
+			res.requestHeaders.set(NONCE_HEADER_KEY, nonce);
+			res.requestHeaders.set(CSP_HEADER_KEY, cspHeader);
+			res.headers.set(NONCE_HEADER_KEY, nonce);
+			res.headers.set(CSP_HEADER_KEY, cspHeader);
+		}
+		return Promise.resolve({ response: res });
+	}
+	protected generateNonce(): string {
+		return Buffer.from(crypto.randomUUID()).toString('base64');
+	}
+	protected replacePlaceholder(cspHeader: string, nonce: string): string {
+		return cspHeader.replaceAll('${nonce}', nonce);
+	}
+}
+@injectable()
+export class ContentSecurityPolicyNonceProvider {
+	public async get(): Promise<string | undefined> {
+		try {
+			// @ts-expect-error: Next.js missing exports prevents ESM resolution with 'nodenext'.
+			const headerList = await import('next/headers').then((headers) => headers.headers());
+			return headerList.get(NONCE_HEADER_KEY);
+		} catch {
+			return Promise.resolve(undefined);
+		}
+	}
+}

package/src/middleware/impl/{DynamicResponseHeaderMiddleware.ts → DynamicHeaderMiddleware.ts} RENAMED Viewed

@@ -1,14 +1,22 @@
 // @ts-expect-error: Next.js missing exports prevents ESM resolution with 'nodenext'.
-import { NextRequest, NextResponse } from 'next/server';
-// @ts-expect-error: Next.js missing exports prevents ESM resolution with 'nodenext'.
-import { NextMiddlewareResult } from 'next/dist/server/web/types';
+import { NextRequest } from 'next/server';
 import { RestClient } from '../../helper/RestClient.ts';
-import { AbstractMiddleware } from '../Middleware.ts';
+import { AbstractMiddleware, MiddlewareNextResponse, MiddlewareResult } from '../Middleware.ts';
 import { inject, injectable } from 'tsyringe';
 import { type HeadlessConfigProviderI, MagnoliaApiEndpointsProvider, HEADLESS_CONFIG_PROVIDER_TOKEN } from '../../config/ConfigProvider.ts';
+enum Target {
+	REQUEST = 'REQUEST',
+	RESPONSE = 'RESPONSE',
+	BOTH = 'BOTH',
+}
+interface HeaderValue {
+	value: string;
+	target: Target;
+}
 @injectable()
-export class DynamicResponseHeaderMiddleware extends AbstractMiddleware {
+export class DynamicHeaderMiddleware extends AbstractMiddleware {
 	private apisProvider: MagnoliaApiEndpointsProvider;
 	constructor(
@@ -23,23 +31,30 @@ export class DynamicResponseHeaderMiddleware extends AbstractMiddleware {
 		return 300;
 	}
 	public getName(): string {
-		return 'DynamicResponseHeader';
+		return 'DynamicHeader';
 	}
-	public async apply(req: NextRequest, res: NextResponse): Promise<NextMiddlewareResult> {
+	public async apply(req: NextRequest, res: MiddlewareNextResponse): Promise<MiddlewareResult> {
 		if (super.isPagePathRequest(req)) {
 			const domain: string = new URL('https://' + req.headers.get('host')).hostname; //strip port
 			const header = await this.getHeader(domain);
 			for (const key in header) {
-				res.headers.set(key, header[key]);
+				const { value, target }: HeaderValue = header[key];
+				if (target == Target.RESPONSE || target == Target.BOTH) {
+					res.headers.set(key, value);
+				}
+				if (target == Target.REQUEST || target == Target.BOTH) {
+					res.requestHeaders.set(key, value);
+				}
 			}
 		}
+		return Promise.resolve({ response: res });
 	}
-	private async getHeader(domain: string): Promise<any> {
+	private async getHeader(domain: string): Promise<Map<string, HeaderValue>> {
 		const queryParams = new URLSearchParams();
 		queryParams.set('domain', domain);
-		const url = this.apisProvider.dynamicResponseHeader() + '?' + queryParams.toString();
+		const url = this.apisProvider.dynamicHeader() + '?' + queryParams.toString();
 		return this.restClient.fetchMagnoliaBasicAuth(url).then((response) => this.restClient.getJson(url, response));
 	}
 }

package/src/middleware/impl/I18nRedirectMiddleware.ts CHANGED Viewed

@@ -1,8 +1,6 @@
 // @ts-expect-error: Next.js missing exports prevents ESM resolution with 'nodenext'.
 import { NextRequest, NextResponse } from 'next/server';
-// @ts-expect-error: Next.js missing exports prevents ESM resolution with 'nodenext'.
-import { NextMiddlewareResult } from 'next/dist/server/web/types';
-import { AbstractMiddleware } from '../Middleware.ts';
+import { AbstractMiddleware, MiddlewareNextResponse, MiddlewareResult } from '../Middleware.ts';
 import { BrowserLanguageProvider } from '../../helper/BrowserLanguageProvider.ts';
 import { inject, injectable } from 'tsyringe';
@@ -19,11 +17,15 @@ export class I18nRedirectMiddleware extends AbstractMiddleware {
 		return 'i18nRedirect';
 	}
-	public async apply(req: NextRequest): Promise<NextMiddlewareResult> {
+	public async apply(req: NextRequest, res: MiddlewareNextResponse): Promise<MiddlewareResult> {
 		if (req.nextUrl.pathname === '/') {
 			// browser language redirect
 			const language = this.browserLanguageProvider.getBrowserLanguage(req);
-			return NextResponse.redirect(new URL(`/${language}${req.nextUrl.search}`, req.url));
+			return Promise.resolve({
+				response: NextResponse.redirect(new URL(`/${language}${req.nextUrl.search}`, req.url)),
+				break: true,
+			});
 		}
+		return Promise.resolve({ response: res });
 	}
 }

package/src/middleware/impl/VanityMiddleware.ts CHANGED Viewed

@@ -1,9 +1,7 @@
 // @ts-expect-error: Next.js missing exports prevents ESM resolution with 'nodenext'.
 import { NextRequest, NextResponse } from 'next/server';
-// @ts-expect-error: Next.js missing exports prevents ESM resolution with 'nodenext'.
-import { NextMiddlewareResult } from 'next/dist/server/web/types';
 import { RestClient } from '../../helper/RestClient.ts';
-import { AbstractMiddleware } from '../Middleware.ts';
+import { AbstractMiddleware, MiddlewareNextResponse, MiddlewareResult } from '../Middleware.ts';
 import { BrowserLanguageProvider } from '../../helper/BrowserLanguageProvider.ts';
 import { inject, injectable } from 'tsyringe';
 import { type HeadlessConfigProviderI, MagnoliaApiEndpointsProvider, HEADLESS_CONFIG_PROVIDER_TOKEN } from '../../config/ConfigProvider.ts';
@@ -41,56 +39,22 @@ export class VanityMiddleware extends AbstractMiddleware {
 		return 'Vanity';
 	}
-	public async apply(req: NextRequest): Promise<NextMiddlewareResult> {
+	public async apply(req: NextRequest, res: MiddlewareNextResponse): Promise<MiddlewareResult> {
 		if (super.isPagePathRequest(req)) {
 			const url = new URL('https://' + req.headers.get('host'));
 			const domain: string = url.hostname; //strip port
 			const path = req.nextUrl.pathname;
 			const language: string = this.browserLanguageProvider.getBrowserLanguage(req);
 			const vanity = await this.getVanity(domain, path, language);
-			if (vanity) {
-				const headers = new Headers();
-				if (vanity.disableCache) {
-					headers.set('Cache-Control', 'no-cache');
-					headers.set('Pragma', 'no-cache');
-				}
-				const init: globalThis.ResponseInit = {
-					headers: headers,
-				};
-				const destination = this.getDestination(vanity, req);
-				switch (vanity.type) {
-					case RedirectType.FORWARD:
-						/*
-						 * currently ignores NODE_TLS_REJECT_UNAUTHORIZED=0 flag, so external destinations (assets) don't work for local development with tomcat
-						 * - https://github.com/vercel/next.js/discussions/49546
-						 * - https://github.com/vercel/next.js/pull/78566
-						 */
-						return NextResponse.rewrite(destination, {
-							...init,
-							status: 303,
-						});
-					case RedirectType.TEMPORARY:
-						return NextResponse.redirect(destination, {
-							...init,
-							status: 307,
-						});
-					case RedirectType.PERMANENT:
-						return NextResponse.redirect(destination, {
-							...init,
-							status: 308,
-						});
-				}
+			const response = vanity ? this.getResponse(req, vanity) : undefined;
+			if (response) {
+				return Promise.resolve({
+					response: response,
+					break: true,
+				});
 			}
 		}
-	}
-	private getDestination(vanity: Vanity, req: NextRequest): URL {
-		const isAbsolute = vanity.destination?.startsWith('https://');
-		const url = new URL(vanity.destination, isAbsolute ? undefined : req.nextUrl);
-		if (vanity.carryOverQueryParams) {
-			req.nextUrl.searchParams.forEach((value, key) => url.searchParams.set(key, value));
-		}
-		return url;
+		return Promise.resolve({ response: res });
 	}
 	private async getVanity(domain: string, path: string, language: string): Promise<Vanity> {
@@ -100,4 +64,58 @@ export class VanityMiddleware extends AbstractMiddleware {
 		const url = this.apisProvider.vanity(language) + '?' + queryParams.toString();
 		return this.restClient.fetchMagnoliaBasicAuth(url).then((response) => this.restClient.getJson(url, response));
 	}
+	private getResponse(req: NextRequest, vanity: Vanity): NextResponse | undefined {
+		const headers = new Headers();
+		if (vanity.disableCache) {
+			headers.set('Cache-Control', 'no-cache');
+			headers.set('Pragma', 'no-cache');
+		}
+		const init: globalThis.ResponseInit = {
+			headers: headers,
+		};
+		const destination = this.getDestination(req, vanity);
+		switch (vanity.type) {
+			case RedirectType.FORWARD:
+				/*
+				 * currently ignores NODE_TLS_REJECT_UNAUTHORIZED=0 flag, so external destinations (assets) don't work for local development with tomcat
+				 * - https://github.com/vercel/next.js/discussions/49546
+				 * - https://github.com/vercel/next.js/pull/78566
+				 */
+				return Promise.resolve({
+					...NextResponse.rewrite(destination, {
+						...init,
+						status: 303,
+					}),
+					break: true,
+				});
+			case RedirectType.TEMPORARY:
+				return Promise.resolve({
+					...NextResponse.redirect(destination, {
+						...init,
+						status: 307,
+					}),
+					break: true,
+				});
+			case RedirectType.PERMANENT:
+				return Promise.resolve({
+					...NextResponse.redirect(destination, {
+						...init,
+						status: 308,
+					}),
+					break: true,
+				});
+			default:
+				return undefined;
+		}
+	}
+	private getDestination(req: NextRequest, vanity: Vanity): URL {
+		const isAbsolute = vanity.destination?.startsWith('https://');
+		const url = new URL(vanity.destination, isAbsolute ? undefined : req.nextUrl);
+		if (vanity.carryOverQueryParams) {
+			req.nextUrl.searchParams.forEach((value, key) => url.searchParams.set(key, value));
+		}
+		return url;
+	}
 }

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

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

package/src/templates/pages/BaseProps.ts CHANGED Viewed

@@ -21,6 +21,11 @@ export interface MetaProps {
 	canonical: string;
 	openGraph: OpenGraph;
 	hrefLangLinks: HrefLangLink[];
+	favicons?: {
+		favicon?: string;
+		faviconLegacy?: string;
+		appleTouchIcon?: string;
+	};
 }
 export default interface Props extends MgnlContent {

package/src/templates/pages/__magnolia-editable-page/EditablePage.tsx CHANGED Viewed

@@ -7,7 +7,7 @@ import { injectable } from 'tsyringe';
 @injectable()
 export class EditablePage {
-	public render(props: EditablePageProps): ReactNode {
+	public async render(props: EditablePageProps): Promise<ReactNode> {
 		const { content } = props;
 		const magnoliaContext: IMagnoliaContext = RefService.getMagnoliaContextRef<IMagnoliaContext>();