feat: exploring multi site support in app router

packages/next/src/middlewares/appMidleware.ts

@@ -1,6 +1,6 @@
 import { NextResponse } from 'next/server';
 import type { NextRequest } from 'next/server';
-import { fetchRedirect, getHeadlessConfig, getSiteByHost } from '@headstartwp/core/utils';
+import { fetchRedirect, getHeadstartWPConfig, getSiteByHost } from '@headstartwp/core/utils';
 
 const ALLOWED_STATIC_PATHS = /^\/.*\.(ico|png|jpg|jpeg)$/g;
 
@@ -12,16 +12,25 @@ function isInternalRequest(req: NextRequest) {
 	return req.nextUrl.pathname.startsWith('/_next');
 }
 
-export async function AppMiddleware(req: NextRequest) {
+type AppMidlewareOptions = {
+	appRouter: boolean;
+};
+
+export async function AppMiddleware(
+	req: NextRequest,
+	options: AppMidlewareOptions = { appRouter: false },
+) {
+	const response = NextResponse.next();
+
 	if (isStaticAssetRequest(req) || isInternalRequest(req)) {
-		return NextResponse.next();
+		return response;
 	}
 
 	const hostname = req.headers.get('host') || '';
 	const site = getSiteByHost(hostname, req.nextUrl.locale);
 	const isMultisiteRequest = site !== null && typeof site.sourceUrl !== 'undefined';
 
-	const { redirectStrategy, sourceUrl } = isMultisiteRequest ? site : getHeadlessConfig();
+	const { redirectStrategy, sourceUrl } = isMultisiteRequest ? site : getHeadstartWPConfig();
 
 	if (!sourceUrl) {
 		throw new Error('Site not found.');
@@ -42,11 +51,18 @@ export async function AppMiddleware(req: NextRequest) {
 	}
 
 	if (isMultisiteRequest) {
-		const url = req.nextUrl;
 		const hostname = req.headers.get('host') || '';
-		url.pathname = `/_sites/${hostname}${url.pathname}`;
+		response.headers.set('x-headstartwp-site', hostname);
+		const url = req.nextUrl;
+
+		if (options.appRouter) {
+			url.pathname = `/${hostname}${url.pathname}`;
+		} else {
+			url.pathname = `/_sites/${hostname}${url.pathname}`;
+		}
+
 		return NextResponse.rewrite(url);
 	}
 
-	return NextResponse.next();
+	return response;
 }

packages/next/src/rsc/config.ts

@@ -0,0 +1,18 @@
+import { getHeadstartWPConfig, getSiteByHost } from '@headstartwp/core';
+import { headers } from 'next/headers';
+
+/**
+ * How to make this work in edge runtimes?
+ */
+export async function loadHeadstartWPConfig() {
+	const config = getHeadstartWPConfig();
+	const headersList = headers();
+
+	const site = headersList.get('x-headstartwp-site');
+
+	if (site) {
+		return getSiteByHost(site);
+	}
+
+	return config;
+}

packages/next/src/rsc/index.ts

@@ -1,2 +1,3 @@
 export * from './data';
 export * from './type';
+export * from './config';

projects/wp-nextjs-app/src/app/middleware.ts

@@ -0,0 +1,19 @@
+import { AppMiddleware } from '@headstartwp/next/middlewares';
+import { NextRequest } from 'next/server';
+
+export const config = {
+	matcher: [
+		/*
+		 * Match all paths except for:
+		 * 1. /api routes
+		 * 2. /_next (Next.js internals)
+		 * 3. /fonts (inside /public)
+		 * 4. all root files inside /public (e.g. /favicon.ico)
+		 */
+		'/((?!api|cache-healthcheck|_next|fonts[\\w-]+\\.\\w+).*)',
+	],
+};
+
+export async function middleware(req: NextRequest) {
+	return AppMiddleware(req, { appRouter: true });
+}