Fix Demo Site Pages (#2695)

The legacyPagesRouterSitePreviewApiHandler used parts from SitePreviewUtils which had a server-only restriction. However, the server-only package can only be used in RSC compatible setups (i.e. the App Router). To fix this, we move the App Router specific parts to a separate file, ensuring that SitePreviewUtils can be used for both Pages Router and App Router.

demo/site-pages/next.config.js

@@ -56,6 +56,12 @@ const nextConfig = {
     eslint: {
         ignoreDuringBuilds: process.env.NODE_ENV === "production",
     },
+    compiler: {
+        styledComponents: true,
+    },
+    experimental: {
+        optimizePackageImports: ["@comet/cms-site"],
+    },
 };
 
 module.exports = nextConfig;

packages/site/cms-site/src/index.ts

@@ -37,8 +37,9 @@ export { calculateInheritAspectRatio, generateImageUrl, getMaxDimensionsFromArea
 export { BlockPreviewProvider } from "./preview/BlockPreviewProvider";
 export { usePreview } from "./preview/usePreview";
 export { PreviewSkeleton } from "./previewskeleton/PreviewSkeleton";
+export { previewParams, sitePreviewRoute } from "./sitePreview/appRouter/sitePreviewRoute";
 export { sendSitePreviewIFrameMessage } from "./sitePreview/iframebridge/sendSitePreviewIFrameMessage";
 export { SitePreviewIFrameMessageType } from "./sitePreview/iframebridge/SitePreviewIFrameMessage";
 export { legacyPagesRouterSitePreviewApiHandler } from "./sitePreview/pagesRouter/legacyPagesRouterSitePreviewApiHandler";
 export { SitePreviewProvider } from "./sitePreview/SitePreviewProvider";
-export { previewParams, SitePreviewData, SitePreviewParams, sitePreviewRoute } from "./sitePreview/SitePreviewUtils";
+export { SitePreviewData, SitePreviewParams } from "./sitePreview/SitePreviewUtils";

packages/site/cms-site/src/sitePreview/SitePreviewUtils.ts

@@ -1,9 +1,4 @@
-import "server-only";
-
 import { jwtVerify } from "jose";
-import { cookies, draftMode } from "next/headers";
-import { redirect } from "next/navigation";
-import { type NextRequest } from "next/server";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type Scope = Record<string, any>;
@@ -17,39 +12,6 @@ export type SitePreviewParams = {
     previewData?: SitePreviewData;
 };
 
-export async function sitePreviewRoute(request: NextRequest, _graphQLFetch: unknown /* deprecated: remove argument in v8 */) {
-    const params = request.nextUrl.searchParams;
-    const jwt = params.get("jwt");
-    if (!jwt) {
-        throw new Error("Missing jwt parameter");
-    }
-
-    const data = await verifySitePreviewJwt(jwt);
-
-    cookies().set("__comet_preview", jwt);
-
-    draftMode().enable();
-
-    return redirect(data.path);
-}
-
-/**
- * Helper for SitePreview
- * @param options.skipDraftModeCheck Allows skipping the draft mode check, only required when called from middleware.ts (see https://github.com/vercel/next.js/issues/52080)
- * @return If SitePreview is active the current preview settings
- */
-export async function previewParams(options: { skipDraftModeCheck: boolean } = { skipDraftModeCheck: false }): Promise<SitePreviewParams | null> {
-    if (!options.skipDraftModeCheck) {
-        if (!draftMode().isEnabled) return null;
-    }
-
-    const cookie = cookies().get("__comet_preview");
-    if (cookie) {
-        return verifySitePreviewJwt(cookie.value);
-    }
-    return null;
-}
-
 export async function verifySitePreviewJwt(jwt: string): Promise<SitePreviewParams> {
     if (!process.env.SITE_PREVIEW_SECRET) {
         throw new Error("SITE_PREVIEW_SECRET environment variable is required.");

packages/site/cms-site/src/sitePreview/appRouter/sitePreviewRoute.ts

@@ -0,0 +1,40 @@
+import "server-only";
+
+import { cookies, draftMode } from "next/headers";
+import { redirect } from "next/navigation";
+import type { NextRequest } from "next/server";
+
+import { SitePreviewParams, verifySitePreviewJwt } from "../SitePreviewUtils";
+
+export async function sitePreviewRoute(request: NextRequest, _graphQLFetch: unknown /* deprecated: remove argument in v8 */) {
+    const params = request.nextUrl.searchParams;
+    const jwt = params.get("jwt");
+    if (!jwt) {
+        throw new Error("Missing jwt parameter");
+    }
+
+    const data = await verifySitePreviewJwt(jwt);
+
+    cookies().set("__comet_preview", jwt);
+
+    draftMode().enable();
+
+    return redirect(data.path);
+}
+
+/**
+ * Helper for SitePreview
+ * @param options.skipDraftModeCheck Allows skipping the draft mode check, only required when called from middleware.ts (see https://github.com/vercel/next.js/issues/52080)
+ * @return If SitePreview is active the current preview settings
+ */
+export async function previewParams(options: { skipDraftModeCheck: boolean } = { skipDraftModeCheck: false }): Promise<SitePreviewParams | null> {
+    if (!options.skipDraftModeCheck) {
+        if (!draftMode().isEnabled) return null;
+    }
+
+    const cookie = cookies().get("__comet_preview");
+    if (cookie) {
+        return verifySitePreviewJwt(cookie.value);
+    }
+    return null;
+}