@decocms/nextjs 7.28.0-beta.1 → 7.28.0-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decocms/nextjs",
-  "version": "7.28.0-beta.1",
+  "version": "7.28.0-beta.3",
   "type": "module",
   "engines": {
     "node": ">=24"
@@ -29,8 +29,8 @@
     "lint:unused": "knip"
   },
   "dependencies": {
-    "@decocms/blocks": "7.28.0-beta.1",
-    "@decocms/blocks-admin": "7.28.0-beta.1"
+    "@decocms/blocks": "7.28.0-beta.3",
+    "@decocms/blocks-admin": "7.28.0-beta.3"
   },
   "peerDependencies": {
     "next": ">=15.0.0",

package/src/DecoPageRenderer.test.tsx

@@ -1,6 +1,6 @@
+import { registerSectionsSync } from "@decocms/blocks/cms";
 import { renderToString } from "react-dom/server";
 import { describe, expect, it } from "vitest";
-import { registerSectionsSync } from "@decocms/blocks/cms";
 import { DecoPageRenderer } from "./DecoPageRenderer";
 
 function Hero({ label }: { label?: string }) {
@@ -16,8 +16,18 @@ describe("DecoPageRenderer (next)", () => {
 
     const element = await DecoPageRenderer({
       sections: [
-        { key: "site/sections/NextPageA.tsx", component: "site/sections/NextPageA.tsx", props: { label: "first" }, index: 0 } as any,
-        { key: "site/sections/NextPageB.tsx", component: "site/sections/NextPageB.tsx", props: { label: "second" }, index: 1 } as any,
+        {
+          key: "site/sections/NextPageA.tsx",
+          component: "site/sections/NextPageA.tsx",
+          props: { label: "first" },
+          index: 0,
+        } as any,
+        {
+          key: "site/sections/NextPageB.tsx",
+          component: "site/sections/NextPageB.tsx",
+          props: { label: "second" },
+          index: 1,
+        } as any,
       ],
       pagePath: "/",
     });

package/src/DecoPageRenderer.tsx

@@ -1,8 +1,8 @@
 import type { DeferredSection, ResolvedSection } from "@decocms/blocks/cms";
 import { resolveDeferredSection } from "@decocms/blocks/cms";
-import { SectionRenderer } from "./SectionRenderer";
-import { DeferredSectionBoundary } from "./DeferredSection";
 import { cloneElement, type ReactElement, type ReactNode } from "react";
+import { DeferredSectionBoundary } from "./DeferredSection";
+import { SectionRenderer } from "./SectionRenderer";
 
 interface DecoPageRendererProps {
   sections: ResolvedSection[];
@@ -19,7 +19,9 @@ type PageItem =
 
 function mergeSections(resolved: ResolvedSection[], deferred: DeferredSection[]): PageItem[] {
   const items: PageItem[] = [];
-  resolved.forEach((section, i) => items.push({ type: "eager", section, sort: section.index ?? i }));
+  resolved.forEach((section, i) =>
+    items.push({ type: "eager", section, sort: section.index ?? i }),
+  );
   for (const d of deferred) items.push({ type: "deferred", deferred: d, sort: d.index });
   items.sort((a, b) => a.sort - b.sort);
   return items;
@@ -54,10 +56,12 @@ export async function DecoPageRenderer({
   for (const d of deferredSections) {
     deferredPromises.set(
       d.index,
-      resolveDeferredSection(d.component, d.rawProps ?? {}, pagePath, matcherCtx).then((resolved) => {
-        if (!resolved) return null;
-        return { ...resolved, index: d.index };
-      }),
+      resolveDeferredSection(d.component, d.rawProps ?? {}, pagePath, matcherCtx).then(
+        (resolved) => {
+          if (!resolved) return null;
+          return { ...resolved, index: d.index };
+        },
+      ),
     );
   }
 

package/src/DecoRootLayout.tsx

@@ -1,6 +1,6 @@
-import type { ReactNode } from "react";
 import { LiveControls } from "@decocms/blocks/hooks";
 import { ANALYTICS_SCRIPT } from "@decocms/blocks/sdk/analytics";
+import type { ReactNode } from "react";
 
 function buildDecoEventsBootstrap(account?: string): string {
   const accountJson = JSON.stringify(account ?? "");

package/src/DeferredSection.test.tsx

@@ -1,6 +1,6 @@
+import { registerSectionsSync } from "@decocms/blocks/cms";
 import { renderToString } from "react-dom/server";
 import { describe, expect, it } from "vitest";
-import { registerSectionsSync } from "@decocms/blocks/cms";
 import { DeferredSectionBoundary } from "./DeferredSection";
 
 function Hero({ label }: { label?: string }) {

package/src/DeferredSection.tsx

@@ -1,6 +1,6 @@
-import { Suspense, type ReactNode } from "react";
 import type { DeferredSection, ResolvedSection } from "@decocms/blocks/cms";
 import { SectionErrorBoundary } from "@decocms/blocks/hooks";
+import { type ReactNode, Suspense } from "react";
 import { SectionRenderer } from "./SectionRenderer";
 
 interface DeferredSectionBoundaryProps {

package/src/SectionRenderer.test.tsx

@@ -1,6 +1,6 @@
+import { registerSection, registerSections, registerSectionsSync } from "@decocms/blocks/cms";
 import { renderToString } from "react-dom/server";
 import { beforeEach, describe, expect, it, vi } from "vitest";
-import { registerSection, registerSections, registerSectionsSync } from "@decocms/blocks/cms";
 import { SectionRenderer } from "./SectionRenderer";
 
 function Hero({ label }: { label?: string }) {

package/src/SectionRenderer.tsx

@@ -1,11 +1,7 @@
-import { createElement, type ReactNode } from "react";
-import {
-  getSection,
-  getSectionOptions,
-  getSyncComponent,
-} from "@decocms/blocks/cms";
 import type { ResolvedSection } from "@decocms/blocks/cms";
+import { getSection, getSectionOptions, getSyncComponent } from "@decocms/blocks/cms";
 import { SectionErrorBoundary } from "@decocms/blocks/hooks";
+import { createElement, type ReactNode } from "react";
 import { ClientOnlySection } from "./ClientOnlySection";
 
 interface SectionRendererProps {

package/src/createDecoPage.draft.test.tsx

@@ -13,7 +13,10 @@ import { afterEach, describe, expect, it, vi } from "vitest";
 
 // The gate must stop us reaching cookies() at all when the feature is off.
 const cookiesMock = vi.fn(async () => ({ get: () => undefined }));
-vi.mock("next/headers", () => ({ cookies: () => cookiesMock() }));
+vi.mock("next/headers", () => ({
+  cookies: () => cookiesMock(),
+  headers: async () => new Headers(),
+}));
 
 // `connection()` is Next's runtime opt-out from static rendering; outside a
 // request scope it throws, so it is stubbed to a no-op here.
@@ -39,7 +42,7 @@ function seedPublishedHome() {
 afterEach(() => {
   cookiesMock.mockClear();
   connectionMock.mockClear();
-  delete process.env.DECO_DRAFT_PREVIEW;
+  delete process.env.DECO_ALLOWED_PREVIEW_HOSTS;
   delete process.env.DECO_SANDBOX_ORIGIN_SUFFIXES;
 });
 
@@ -72,8 +75,7 @@ describe("createDecoPage — draft preview gate", () => {
   });
 
   it("reads cookies() once the feature is fully configured", async () => {
-    process.env.DECO_DRAFT_PREVIEW = "1";
-    process.env.DECO_SANDBOX_ORIGIN_SUFFIXES = ".preview-studio.decocms.com";
+    process.env.DECO_ALLOWED_PREVIEW_HOSTS = "preview.example";
     seedPublishedHome();
 
     const { default: Page } = createDecoPage({ siteName: "test-site" });

package/src/createDecoPage.test.tsx

@@ -1,6 +1,6 @@
+import { registerSections, setBlocks } from "@decocms/blocks/cms";
 import { renderToString } from "react-dom/server";
 import { describe, expect, it } from "vitest";
-import { registerSections, setBlocks } from "@decocms/blocks/cms";
 import { createDecoPage } from "./createDecoPage";
 
 function Hero({ label }: { label?: string }) {
@@ -58,8 +58,6 @@ describe("createDecoPage (next)", () => {
 
     const { default: Page } = createDecoPage({ siteName: "test-site" });
 
-    await expect(
-      Page({ params: Promise.resolve({ slug: ["missing"] }) }),
-    ).rejects.toThrow();
+    await expect(Page({ params: Promise.resolve({ slug: ["missing"] }) })).rejects.toThrow();
   });
 });

package/src/createDecoPage.tsx

@@ -90,7 +90,8 @@ export function createDecoPage({ siteName }: CreateDecoPageOptions) {
    *     first wins for both. So this must be awaited at the top of BOTH, not
    *     just the page. `cache()` here makes the second call free.
    *
-   * Gated on `isDraftPreviewEnabled()` — a plain env read, not a dynamic API —
+   * Gated on `isDraftPreviewEnabled()` (DECO_ALLOWED_PREVIEW_HOSTS non-empty) — a
+   * plain env read, not a dynamic API —
    * so sites that never opt in behave exactly as before. That gate is doing
    * real work: `cookies()` and `searchParams` are both dynamic, and touching
    * them unconditionally would opt EVERY page out of static/ISR rendering.

package/src/draft.ts

@@ -22,8 +22,12 @@
  * i.e. the page component. `ensureDraft()` exists so each site makes one call
  * instead of re-deriving that ordering rule.
  */
-import { resolveDraftDecofile, setDraftOverrideGetter } from "@decocms/blocks/cms";
-import { cookies } from "next/headers";
+import {
+  isDraftHostAllowed,
+  resolveDraftDecofile,
+  setDraftOverrideGetter,
+} from "@decocms/blocks/cms";
+import { cookies, headers } from "next/headers";
 import { cache } from "react";
 
 /** Cookie that carries the pointer across in-preview navigation. */
@@ -102,7 +106,7 @@ export function selectDraftPointer(
  * `cookies()`. There is deliberately no request header in the path: the page
  * owns the decision, so a draft keeps working on routes the middleware matcher
  * never sees, and there is one less forgeable input to reason about. (The
- * pointer was never a secret — the sandbox handle is the capability — so a
+ * pointer was never a secret — the draft id (the token's authority) is the capability — so a
  * client supplying one directly is equivalent to typing the query param.)
  *
  * Returns whether a draft was bound, so callers can surface an explicit
@@ -116,6 +120,14 @@ export async function ensureDraft(searchParams?: DraftSearchParams): Promise<boo
   const pointer = selectDraftPointer(searchParams, cookieStore.get(DRAFT_COOKIE)?.value);
   if (!pointer) return false;
 
+  // Host gate, checked only once a pointer exists (headers() is a dynamic
+  // API): the same build may serve the preview domain and the production
+  // domain, and only hosts named in DECO_ALLOWED_PREVIEW_HOSTS may render
+  // drafts — production stays published no matter what the URL carries.
+  const requestHeaders = await headers();
+  const host = requestHeaders.get("x-forwarded-host") ?? requestHeaders.get("host");
+  if (!isDraftHostAllowed(host)) return false;
+
   const blocks = await resolveDraftDecofile({ pointer });
   if (!blocks) return false;
 

package/src/draftMiddleware.test.ts

@@ -1,9 +1,17 @@
 import { NextRequest, NextResponse } from "next/server";
-import { describe, expect, it } from "vitest";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
 
 import { DRAFT_COOKIE } from "./draft";
 import { applyDraft, prepareDraft, rewriteToDraftRoute } from "./draftMiddleware";
 
+beforeEach(() => {
+  // The middleware is host-gated; these tests run as the allowed host.
+  process.env.DECO_ALLOWED_PREVIEW_HOSTS = "site.example";
+});
+afterEach(() => {
+  delete process.env.DECO_ALLOWED_PREVIEW_HOSTS;
+});
+
 function request(url: string, cookie?: string): NextRequest {
   const req = new NextRequest(new URL(url), {
     headers: cookie ? { cookie: `${DRAFT_COOKIE}=${cookie}` } : {},
@@ -13,18 +21,30 @@ function request(url: string, cookie?: string): NextRequest {
 
 describe("prepareDraft", () => {
   it("reads the pointer from the param", () => {
-    expect(prepareDraft(request("https://site.example/p?__draft=abc@v1")).pointer).toBe("abc@v1");
+    expect(prepareDraft(request("https://site.example/p?__draft=abc.localhost@v1")).pointer).toBe(
+      "abc.localhost@v1",
+    );
   });
 
   it("reads the pointer from the cookie on a plain navigation", () => {
-    expect(prepareDraft(request("https://site.example/p", "abc@v1")).pointer).toBe("abc@v1");
+    expect(prepareDraft(request("https://site.example/p", "abc.localhost@v1")).pointer).toBe(
+      "abc.localhost@v1",
+    );
+  });
+
+  it("is inert on a host outside the allowlist — the production domain", () => {
+    // Same build, different Host: no cookie, no rewrite, nothing touched.
+    const req = request("https://fila.com.br/p?__draft=abc@v1");
+    process.env.DECO_ALLOWED_PREVIEW_HOSTS = "fila.vtex.app";
+    expect(prepareDraft(req)).toEqual({ pointer: null, setCookie: null, clearCookie: false });
+    expect(rewriteToDraftRoute(req, prepareDraft(req))).toBeNull();
   });
 
   it("ignores a client-supplied draft header — the page owns the decision", () => {
     // There is no request-header path any more; the page reads searchParams
     // and cookies itself, so a forged header is simply not an input.
     const req = new NextRequest(new URL("https://site.example/p"), {
-      headers: { "x-deco-draft": "attacker@v1" },
+      headers: { "x-deco-draft": "attacker.localhost@v1" },
     });
     expect(prepareDraft(req).pointer).toBeNull();
   });
@@ -32,11 +52,11 @@ describe("prepareDraft", () => {
 
 describe("applyDraft", () => {
   it("sets a partitioned cross-site cookie when entering draft mode", () => {
-    const decision = prepareDraft(request("https://site.example/p?__draft=abc@v1"));
+    const decision = prepareDraft(request("https://site.example/p?__draft=abc.localhost@v1"));
     const res = applyDraft(NextResponse.next(), decision);
 
     const setCookie = res.headers.get("set-cookie") ?? "";
-    expect(setCookie).toContain(`${DRAFT_COOKIE}=abc%40v1`);
+    expect(setCookie).toContain(`${DRAFT_COOKIE}=abc.localhost%40v1`);
     // The preview iframe is cross-site, so these attributes are what make the
     // cookie survive at all — not hardening extras.
     expect(setCookie).toMatch(/SameSite=None/i);
@@ -48,7 +68,7 @@ describe("applyDraft", () => {
   it("marks a draft response uncacheable and unindexable", () => {
     // With the pointer in a cookie, draft and published share a URL — a CDN
     // keyed on URL alone would serve unpublished content to a real visitor.
-    const decision = prepareDraft(request("https://site.example/p", "abc@v1"));
+    const decision = prepareDraft(request("https://site.example/p", "abc.localhost@v1"));
     const res = applyDraft(NextResponse.next(), decision);
 
     expect(res.headers.get("cache-control")).toBe("no-store, private");
@@ -67,7 +87,9 @@ describe("applyDraft", () => {
   });
 
   it("clears the cookie on ?__draft=off", () => {
-    const decision = prepareDraft(request("https://site.example/p?__draft=off", "abc@v1"));
+    const decision = prepareDraft(
+      request("https://site.example/p?__draft=off", "abc.localhost@v1"),
+    );
     expect(decision.clearCookie).toBe(true);
 
     const res = applyDraft(NextResponse.next(), decision);
@@ -82,16 +104,16 @@ describe("applyDraft", () => {
 
 describe("rewriteToDraftRoute", () => {
   it("rewrites a drafted request onto the dynamic draft route", () => {
-    const req = request("https://site.example/blog/hello?__draft=abc@v1");
+    const req = request("https://site.example/blog/hello?__draft=abc.localhost@v1");
     const res = rewriteToDraftRoute(req, prepareDraft(req));
     const target = new URL(res?.headers.get("x-middleware-rewrite") ?? "");
     expect(target.pathname).toBe("/_draft/blog/hello");
     // The pointer must survive: the draft page reads it from searchParams.
-    expect(target.searchParams.get("__draft")).toBe("abc@v1");
+    expect(target.searchParams.get("__draft")).toBe("abc.localhost@v1");
   });
 
   it("rewrites a cookie-only navigation too", () => {
-    const req = request("https://site.example/blog/hello", "abc@v1");
+    const req = request("https://site.example/blog/hello", "abc.localhost@v1");
     const res = rewriteToDraftRoute(req, prepareDraft(req));
     expect(new URL(res?.headers.get("x-middleware-rewrite") ?? "").pathname).toBe(
       "/_draft/blog/hello",
@@ -106,12 +128,12 @@ describe("rewriteToDraftRoute", () => {
   });
 
   it("never nests the prefix when middleware re-runs on the rewritten URL", () => {
-    const req = request("https://site.example/_draft/blog/hello?__draft=abc@v1");
+    const req = request("https://site.example/_draft/blog/hello?__draft=abc.localhost@v1");
     expect(rewriteToDraftRoute(req, prepareDraft(req))).toBeNull();
   });
 
   it("does not rewrite when leaving draft mode", () => {
-    const req = request("https://site.example/blog/hello?__draft=off", "abc@v1");
+    const req = request("https://site.example/blog/hello?__draft=off", "abc.localhost@v1");
     expect(rewriteToDraftRoute(req, prepareDraft(req))).toBeNull();
   });
 });

package/src/draftMiddleware.ts

@@ -19,8 +19,9 @@
  * Lives on its own subpath so middleware (edge runtime) never imports the root
  * barrel, which pulls in the client component graph.
  */
-import { type NextRequest, NextResponse } from "next/server";
 
+import { isDraftHostAllowed } from "@decocms/blocks/cms";
+import { type NextRequest, NextResponse } from "next/server";
 import {
   DRAFT_COOKIE,
   DRAFT_COOKIE_OPTIONS,
@@ -36,16 +37,26 @@ import {
  * nothing has to be forwarded through the request. That also means a draft
  * still works on routes this middleware never matches.
  */
+const INERT: DraftMiddlewareDecision = { pointer: null, setCookie: null, clearCookie: false };
+
 export function prepareDraft(request: NextRequest): DraftMiddlewareDecision {
+  // Host gate first: on a host not named in DECO_ALLOWED_PREVIEW_HOSTS the
+  // decision is inert — no cookie written, no rewrite, no headers touched —
+  // so the production domain behaves as if the feature didn't exist.
+  const host =
+    request.headers.get("x-forwarded-host") ?? request.headers.get("host") ?? request.nextUrl.host;
+  if (!isDraftHostAllowed(host)) return INERT;
   return decideDraft(new URL(request.url), request.cookies.get(DRAFT_COOKIE)?.value ?? null);
 }
 
 /**
- * Route prefix a drafted request is rewritten onto.
+ * URL prefix a drafted request is rewritten onto.
  *
- * Deliberately a `_`-prefixed segment: Next treats those as private folders and
- * excludes them from routing, so a site cannot accidentally expose it as a real
- * page — it is reachable only through the middleware rewrite below.
+ * The site must mount the matching route as `app/%5Fdraft/...` — URL-encoded.
+ * A literal `_draft/` directory is a Next "private folder", excluded from
+ * routing entirely, so the rewrite would fall through to whatever catch-all
+ * follows and 404. The encoded directory serves the same `/_draft` URL while
+ * staying routable.
  */
 export const DRAFT_ROUTE_PREFIX = "/_draft";