@decocms/nextjs 7.27.0 → 7.28.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decocms/nextjs",
-  "version": "7.27.0",
+  "version": "7.28.0-beta.1",
   "type": "module",
   "engines": {
     "node": ">=24"
@@ -19,7 +19,8 @@
     "./config": {
       "types": "./src/config.d.cts",
       "default": "./src/config.cjs"
-    }
+    },
+    "./middleware": "./src/draftMiddleware.ts"
   },
   "scripts": {
     "build": "tsc",
@@ -28,8 +29,8 @@
     "lint:unused": "knip"
   },
   "dependencies": {
-    "@decocms/blocks": "7.27.0",
-    "@decocms/blocks-admin": "7.27.0"
+    "@decocms/blocks": "7.28.0-beta.1",
+    "@decocms/blocks-admin": "7.28.0-beta.1"
   },
   "peerDependencies": {
     "next": ">=15.0.0",

package/src/config.cjs

@@ -12,6 +12,7 @@
  *    (`app/deco/[[...deco]]/route.ts` + createDecoRouteHandlers) serves
  *    the whole protocol.
  * 2. transpilePackages for the raw-TS @decocms packages.
+ * 3. Response headers that keep a draft-preview render out of every cache.
  */
 const DECO_REWRITES = [
   { source: "/.decofile", destination: "/deco/decofile" },
@@ -21,8 +22,56 @@ const DECO_REWRITES = [
 
 const DECO_TRANSPILE = ["@decocms/blocks", "@decocms/blocks-admin", "@decocms/nextjs"];
 
+/**
+ * A draft render must never be cached or indexed: with the pointer in a cookie
+ * it shares a URL with the published page, so a shared cache keyed on URL alone
+ * would serve unpublished content to a real visitor.
+ *
+ * Two rules, not one: `has` entries within a rule are ANDed, and the two
+ * signals never coincide. On ENTRY the pointer is in the query and the cookie
+ * has not been set yet (middleware sets it in the response); on every
+ * navigation after that it is the cookie and the query is gone.
+ *
+ * MEASURED LIMIT — do not assume `no-store` is in force. On a *dynamic* App
+ * Router response Next reserves `Cache-Control` and `Vary` and overwrites
+ * whatever we set, from here AND from middleware: the wire shows
+ * `Cache-Control: no-cache, must-revalidate` and
+ * `Vary: rsc, next-router-state-tree, …`. Verified that these rules do match
+ * (a marker header on the same rules came through on both signals and was
+ * correctly absent otherwise) — it is those two header names specifically that
+ * Next owns. `X-Robots-Tag` does get through.
+ *
+ * Why that is still safe: `no-cache` is not "don't cache", it is "never reuse
+ * without revalidating with the origin", so a compliant shared cache cannot
+ * serve a stored draft to a different visitor — it has to ask us first, and we
+ * answer per-request. That also covers the loss of `Vary: Cookie`. The residual
+ * risk is a cache that ignores `no-cache`; closing that needs a CDN-level rule,
+ * which is a deployment concern rather than something this package can set.
+ * `Cache-Control`/`Vary` are kept here so the intent is explicit and so they
+ * apply anywhere Next is not overriding them.
+ */
+const DRAFT_NO_STORE_HEADERS = [
+  { key: "Cache-Control", value: "no-store, private" },
+  { key: "Vary", value: "Cookie" },
+  { key: "X-Robots-Tag", value: "noindex, nofollow" },
+];
+
+const DECO_DRAFT_HEADERS = [
+  {
+    source: "/:path*",
+    has: [{ type: "query", key: "__draft" }],
+    headers: DRAFT_NO_STORE_HEADERS,
+  },
+  {
+    source: "/:path*",
+    has: [{ type: "cookie", key: "__deco_draft" }],
+    headers: DRAFT_NO_STORE_HEADERS,
+  },
+];
+
 function withDeco(nextConfig = {}) {
   const userRewrites = nextConfig.rewrites;
+  const userHeaders = nextConfig.headers;
   return {
     ...nextConfig,
     transpilePackages: [...new Set([...(nextConfig.transpilePackages ?? []), ...DECO_TRANSPILE])],
@@ -31,7 +80,13 @@ function withDeco(nextConfig = {}) {
       if (Array.isArray(user)) return [...DECO_REWRITES, ...user];
       return { ...user, beforeFiles: [...DECO_REWRITES, ...(user.beforeFiles ?? [])] };
     },
+    async headers() {
+      const user = typeof userHeaders === "function" ? await userHeaders() : (userHeaders ?? []);
+      // Draft rules first: a site's own catch-all Cache-Control must not win
+      // over the one thing standing between a draft and a shared cache.
+      return [...DECO_DRAFT_HEADERS, ...user];
+    },
   };
 }
 
-module.exports = { withDeco, DECO_REWRITES };
+module.exports = { withDeco, DECO_REWRITES, DECO_DRAFT_HEADERS };

package/src/config.test.ts

@@ -45,3 +45,42 @@ describe("withDeco", () => {
     expect(cfg.transpilePackages).toContain("other");
   });
 });
+
+describe("withDeco draft headers", () => {
+  it("adds no-store/no-index rules for both draft signals", async () => {
+    const headers = await withDeco({}).headers!();
+    // Two rules, not one: `has` entries within a rule are ANDed, and the query
+    // (entry) and cookie (navigation) signals never coincide.
+    expect(headers).toHaveLength(2);
+    expect(headers[0].has).toEqual([{ type: "query", key: "__draft" }]);
+    expect(headers[1].has).toEqual([{ type: "cookie", key: "__deco_draft" }]);
+
+    for (const rule of headers) {
+      const byKey = Object.fromEntries(rule.headers.map((h) => [h.key, h.value]));
+      // `no-store` is what actually stops a shared cache serving unpublished
+      // content to a real visitor — the pointer being a cookie means draft and
+      // published share a URL.
+      expect(byKey["Cache-Control"]).toBe("no-store, private");
+      expect(byKey.Vary).toBe("Cookie");
+      expect(byKey["X-Robots-Tag"]).toBe("noindex, nofollow");
+    }
+  });
+
+  it("keeps a site's own headers, with the draft rules taking precedence", async () => {
+    const cfg = withDeco({
+      headers: async () => [
+        { source: "/:path*", headers: [{ key: "Cache-Control", value: "public, max-age=3600" }] },
+      ],
+    });
+    const headers = await cfg.headers!();
+    expect(headers).toHaveLength(3);
+    // A site's catch-all cache policy must not out-rank the draft rules.
+    expect(headers[0].has).toBeDefined();
+    expect(headers[1].has).toBeDefined();
+    expect(headers[2].headers[0].value).toBe("public, max-age=3600");
+  });
+
+  it("leaves a site without headers() untouched apart from the draft rules", async () => {
+    expect(await withDeco({}).headers!()).toHaveLength(2);
+  });
+});

package/src/createDecoPage.draft.test.tsx

@@ -0,0 +1,89 @@
+/**
+ * Draft-preview wiring in `createDecoPage`.
+ *
+ * Separate from `createDecoPage.test.tsx` because this file has to mock
+ * `next/headers`, and that mock would otherwise apply to the plain
+ * (non-draft) cases too — which are worth keeping honest about never
+ * touching a dynamic API at all.
+ */
+
+import { registerSections, setBlocks } from "@decocms/blocks/cms";
+import { renderToString } from "react-dom/server";
+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() }));
+
+// `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.
+const connectionMock = vi.fn(async () => {});
+vi.mock("next/server", () => ({ connection: () => connectionMock() }));
+
+const { createDecoPage } = await import("./createDecoPage");
+
+function Hero({ label }: { label?: string }) {
+  return <h1>{`hero-${label ?? "none"}`}</h1>;
+}
+
+function seedPublishedHome() {
+  registerSections({ "site/sections/DraftHero.tsx": async () => ({ default: Hero }) });
+  setBlocks({
+    "pages-home": {
+      path: "/",
+      sections: [{ __resolveType: "site/sections/DraftHero.tsx", label: "published" }],
+    },
+  });
+}
+
+afterEach(() => {
+  cookiesMock.mockClear();
+  connectionMock.mockClear();
+  delete process.env.DECO_DRAFT_PREVIEW;
+  delete process.env.DECO_SANDBOX_ORIGIN_SUFFIXES;
+});
+
+describe("createDecoPage — draft preview gate", () => {
+  it("never reads cookies() when the feature is off", async () => {
+    // Load-bearing, not a micro-optimisation: cookies() is a dynamic API, so
+    // calling it unconditionally would opt EVERY page of EVERY site out of
+    // static/ISR rendering the moment this package is upgraded.
+    seedPublishedHome();
+
+    const { default: Page } = createDecoPage({ siteName: "test-site" });
+    const html = renderToString(await Page({ params: Promise.resolve({ slug: [] }) }));
+
+    expect(html).toContain("hero-published");
+    expect(cookiesMock).not.toHaveBeenCalled();
+    expect(connectionMock).not.toHaveBeenCalled();
+  });
+
+  it("stays off when the flag is set but no origin suffix is configured", async () => {
+    // Both halves are required — a bare flag with nowhere to fetch from is
+    // inert, mirroring Fast Deploy's opt-in.
+    process.env.DECO_DRAFT_PREVIEW = "1";
+    seedPublishedHome();
+
+    const { default: Page } = createDecoPage({ siteName: "test-site" });
+    const html = renderToString(await Page({ params: Promise.resolve({ slug: [] }) }));
+
+    expect(html).toContain("hero-published");
+    expect(cookiesMock).not.toHaveBeenCalled();
+  });
+
+  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";
+    seedPublishedHome();
+
+    const { default: Page } = createDecoPage({ siteName: "test-site" });
+    const html = renderToString(await Page({ params: Promise.resolve({ slug: [] }) }));
+
+    // No draft pointer on the request, so the page still renders published —
+    // enabling the feature must not change what an ordinary visitor sees.
+    expect(html).toContain("hero-published");
+    expect(cookiesMock).toHaveBeenCalled();
+    // Nothing was bound, so no need to force the page dynamic.
+    expect(connectionMock).not.toHaveBeenCalled();
+  });
+});

package/src/createDecoPage.tsx

@@ -1,14 +1,17 @@
-import { cache } from "react";
-import { notFound } from "next/navigation";
-import type { Metadata } from "next";
 import {
+  type DecoPageResult,
   extractSeoFromProps,
   extractSeoFromSections,
-  resolveDecoPage,
-  type DecoPageResult,
+  isDraftPreviewEnabled,
   type PageSeo,
+  resolveDecoPage,
 } from "@decocms/blocks/cms";
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+import { connection } from "next/server";
+import { cache } from "react";
 import { DecoPageRenderer } from "./DecoPageRenderer";
+import { type DraftSearchParams, ensureDraft } from "./draft";
 
 interface CreateDecoPageOptions {
   siteName: string;
@@ -16,6 +19,12 @@ interface CreateDecoPageOptions {
 
 interface PageProps {
   params: Promise<{ slug?: string[] }>;
+  /**
+   * Next always supplies this; optional here so existing callers (and unit
+   * tests) that construct props by hand keep compiling. Draft preview reads
+   * `?__draft=` from it — see bindDraftOnce.
+   */
+  searchParams?: Promise<DraftSearchParams>;
 }
 
 function pathFromSlug(slug: string[] | undefined): string {
@@ -67,8 +76,47 @@ export function createDecoPage({ siteName }: CreateDecoPageOptions) {
 
   const resolveForPath = cache(async (pathname: string) => resolveDecoPage(pathname, {}));
 
-  async function generateMetadata({ params }: PageProps): Promise<Metadata> {
+  /**
+   * Bind this request's draft decofile, at most once, BEFORE anything resolves
+   * a page.
+   *
+   * Ordering is load-bearing twice over:
+   *
+   *  1. `resolveDecoPage` calls `loadBlocks()`, so a draft bound afterwards
+   *     would resolve the page against published content and silently render
+   *     the wrong thing.
+   *  2. `resolveForPath` is `cache()`d per request and Next may run
+   *     `generateMetadata` and the page body concurrently — whichever resolves
+   *     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 —
+   * 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.
+   *
+   * KNOWN COST: with the flag on, every page served by this route becomes
+   * dynamic, because reading the pointer requires `cookies()`. Acceptable
+   * while the feature is opt-in; the fix, when it needs to run on a
+   * statically-rendered production site, is for middleware to rewrite draft
+   * requests onto a separate dynamic route so ordinary traffic keeps its cache.
+   */
+  const bindDraftOnce = cache(async (searchParams?: DraftSearchParams): Promise<boolean> => {
+    if (!isDraftPreviewEnabled()) return false;
+
+    const bound = await ensureDraft(searchParams);
+
+    // A draft render must never be cached — ISR or the Full Route Cache would
+    // hand unpublished content to a real visitor. `revalidate` is a static
+    // export and cannot vary per request, so opt out at runtime instead.
+    if (bound) await connection();
+
+    return bound;
+  });
+
+  async function generateMetadata({ params, searchParams }: PageProps): Promise<Metadata> {
     const { slug } = await params;
+    await bindDraftOnce(await searchParams);
     const page = await resolveForPath(pathFromSlug(slug));
     if (!page) return {};
 
@@ -81,9 +129,11 @@ export function createDecoPage({ siteName }: CreateDecoPageOptions) {
     };
   }
 
-  async function Page({ params }: PageProps) {
+  async function Page({ params, searchParams }: PageProps) {
     const { slug } = await params;
     const pathname = pathFromSlug(slug);
+    // Before resolveForPath — see bindDraftOnce.
+    await bindDraftOnce(await searchParams);
     const page = await resolveForPath(pathname);
     if (!page) notFound();
 

package/src/draft.test.ts

@@ -0,0 +1,73 @@
+import { describe, expect, it } from "vitest";
+
+import { DRAFT_COOKIE_OPTIONS, DRAFT_PARAM, decideDraft } from "./draft";
+
+function urlWith(param?: string): URL {
+  const url = new URL("https://site.example/some/page");
+  if (param !== undefined) url.searchParams.set(DRAFT_PARAM, param);
+  return url;
+}
+
+describe("decideDraft", () => {
+  it("enters draft mode from the param and sets the cookie", () => {
+    expect(decideDraft(urlWith("abc@v1"), null)).toEqual({
+      pointer: "abc@v1",
+      setCookie: "abc@v1",
+      clearCookie: false,
+    });
+  });
+
+  it("carries the draft across navigation via the cookie alone", () => {
+    // The param is gone — this is the in-preview link click that a
+    // param-only design would silently drop back to published.
+    expect(decideDraft(urlWith(), "abc@v1")).toEqual({
+      pointer: "abc@v1",
+      setCookie: null,
+      clearCookie: false,
+    });
+  });
+
+  it("lets the param override a stale cookie", () => {
+    // Studio navigating to a newer version must win over the older pointer
+    // still sitting in the cookie, or a save would never be reflected.
+    expect(decideDraft(urlWith("abc@v2"), "abc@v1")).toEqual({
+      pointer: "abc@v2",
+      setCookie: "abc@v2",
+      clearCookie: false,
+    });
+  });
+
+  it("leaves draft mode on ?__draft=off, even with a cookie set", () => {
+    expect(decideDraft(urlWith("off"), "abc@v1")).toEqual({
+      pointer: null,
+      setCookie: null,
+      clearCookie: true,
+    });
+  });
+
+  it("is inert for an ordinary request", () => {
+    expect(decideDraft(urlWith(), null)).toEqual({
+      pointer: null,
+      setCookie: null,
+      clearCookie: false,
+    });
+  });
+});
+
+describe("DRAFT_COOKIE_OPTIONS", () => {
+  it("is set up to survive a cross-site preview iframe", () => {
+    // The preview iframe is cross-site (Studio embeds the production origin),
+    // so the cookie is third-party. Without SameSite=None+Secure it is never
+    // sent; without Partitioned (CHIPS) it is dropped as browsers wind down
+    // unpartitioned third-party cookies. These attributes are load-bearing,
+    // not incidental.
+    expect(DRAFT_COOKIE_OPTIONS.sameSite).toBe("none");
+    expect(DRAFT_COOKIE_OPTIONS.secure).toBe(true);
+    expect(DRAFT_COOKIE_OPTIONS.partitioned).toBe(true);
+    expect(DRAFT_COOKIE_OPTIONS.httpOnly).toBe(true);
+  });
+
+  it("is short-lived so a stale pointer can't pin an old version", () => {
+    expect(DRAFT_COOKIE_OPTIONS.maxAge).toBeLessThanOrEqual(60 * 60);
+  });
+});

package/src/draft.ts

@@ -0,0 +1,188 @@
+/**
+ * Draft preview — the Next.js binding.
+ *
+ * `@decocms/blocks`'s `draftSource` owns the framework-agnostic half (pointer
+ * parsing, origin construction, fetch, version cache). This file binds a
+ * resolved draft to the current request.
+ *
+ * ## Why React `cache()` and not AsyncLocalStorage
+ *
+ * App Router never enters `RequestContext.run` (that is a TanStack/Workers
+ * path), and ALS cannot help here anyway: you cannot wrap `ALS.run()` around a
+ * component's children, because the children render later, outside the call.
+ * `cache()` gives a per-request memoized value in RSC, which is exactly the
+ * scope needed — verified concurrently, see `draft.test.ts`.
+ *
+ * ## Why this must be awaited by the PAGE, not a layout
+ *
+ * A layout's `await` does NOT gate its children: App Router renders a layout
+ * and its children concurrently, so sections call `loadBlocks()` before a
+ * layout-level resolve lands, and silently render published content. The
+ * resolve has to happen somewhere that returns the subtree *after* awaiting —
+ * 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 { cache } from "react";
+
+/** Cookie that carries the pointer across in-preview navigation. */
+export const DRAFT_COOKIE = "__deco_draft";
+/** Query param that enters draft mode (and, with `off`, leaves it). */
+export const DRAFT_PARAM = "__draft";
+
+/**
+ * Request-scoped slot.
+ *
+ * `cache()` memoizes per-request, so every call within one request gets the
+ * same object and a different one per request. Mutable by design: the page
+ * fills it before returning its subtree, and nested sections read it
+ * synchronously through `loadBlocks()`.
+ */
+const draftSlot = cache((): { blocks: Record<string, unknown> | null } => ({
+  blocks: null,
+}));
+
+/**
+ * Register the request-scoped getter with the runtime.
+ *
+ * Idempotent and safe to call at module scope: outside a request `cache()`
+ * still returns an object, whose `blocks` is null, so `loadBlocks()` sees no
+ * override and behaves exactly as before.
+ */
+let registered = false;
+export function registerDraftOverride(): void {
+  if (registered) return;
+  registered = true;
+  setDraftOverrideGetter(() => draftSlot().blocks);
+}
+
+/** A page's `searchParams` prop, before it is narrowed. */
+export type DraftSearchParams = Record<string, string | string[] | undefined>;
+
+/** First value of a search param that may legitimately repeat. */
+function firstParam(searchParams: DraftSearchParams | undefined, key: string): string | null {
+  const raw = searchParams?.[key];
+  if (Array.isArray(raw)) return raw[0] ?? null;
+  return raw ?? null;
+}
+
+/**
+ * The pointer for this request: the query param wins, the cookie carries
+ * navigation, `off` exits.
+ *
+ * Read directly from the page rather than trusted from a request header. The
+ * param has to take precedence or a save would never surface — Studio
+ * navigating to a new version would keep rendering whatever older pointer is
+ * still sitting in the cookie.
+ */
+export function selectDraftPointer(
+  searchParams: DraftSearchParams | undefined,
+  cookieValue: string | null | undefined,
+): string | null {
+  const param = firstParam(searchParams, DRAFT_PARAM);
+  if (param === "off") return null;
+  if (param) return param;
+  return cookieValue ?? null;
+}
+
+/**
+ * Resolve the request's draft, if any, and bind it for the rest of the render.
+ *
+ * Call this from the PAGE, awaited, before returning the subtree:
+ *
+ * ```tsx
+ * export default async function Page({ searchParams }) {
+ *   await ensureDraft(await searchParams);
+ *   return <DecoPageRenderer />;
+ * }
+ * ```
+ *
+ * Reads the param from the page's own `searchParams` and the cookie via
+ * `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
+ * client supplying one directly is equivalent to typing the query param.)
+ *
+ * Returns whether a draft was bound, so callers can surface an explicit
+ * "draft unavailable" state instead of silently showing published content —
+ * the failure mode most likely to mislead someone reviewing their own edits.
+ */
+export async function ensureDraft(searchParams?: DraftSearchParams): Promise<boolean> {
+  registerDraftOverride();
+
+  const cookieStore = await cookies();
+  const pointer = selectDraftPointer(searchParams, cookieStore.get(DRAFT_COOKIE)?.value);
+  if (!pointer) return false;
+
+  const blocks = await resolveDraftDecofile({ pointer });
+  if (!blocks) return false;
+
+  draftSlot().blocks = blocks;
+  return true;
+}
+
+// ---------------------------------------------------------------------------
+// Middleware helper
+// ---------------------------------------------------------------------------
+
+/** What middleware should do with this request. */
+export interface DraftMiddlewareDecision {
+  /** The active pointer, or null. Drives the cache/indexing headers. */
+  pointer: string | null;
+  /** Set the cookie to this value (entering draft mode). */
+  setCookie: string | null;
+  /** Clear the cookie (leaving draft mode via `?__draft=off`). */
+  clearCookie: boolean;
+}
+
+/**
+ * Decide the draft state for a request, from `?__draft=` and the cookie.
+ *
+ * The param is authoritative on entry and the cookie carries subsequent
+ * in-preview navigation — a param alone dies on the first link click, and a
+ * cookie alone cannot be relied on: the preview iframe is cross-site, so the
+ * cookie is third-party and may be blocked outright (Safari ITP) or
+ * partitioned (Chrome CHIPS). Entry therefore never depends on cookie support.
+ *
+ * `?__draft=off` leaves draft mode, so a session can be ended deliberately
+ * rather than waiting for a cookie to expire.
+ *
+ * Pure and framework-free so it can be unit-tested without a Next request; the
+ * caller applies the decision to its own `NextResponse`.
+ */
+export function decideDraft(
+  url: URL,
+  cookieValue: string | null | undefined,
+): DraftMiddlewareDecision {
+  const param = url.searchParams.get(DRAFT_PARAM);
+
+  if (param === "off") {
+    return { pointer: null, setCookie: null, clearCookie: true };
+  }
+  if (param) {
+    return { pointer: param, setCookie: param, clearCookie: false };
+  }
+  if (cookieValue) {
+    return { pointer: cookieValue, setCookie: null, clearCookie: false };
+  }
+  return { pointer: null, setCookie: null, clearCookie: false };
+}
+
+/**
+ * Cookie attributes for the draft pointer.
+ *
+ * `SameSite=None; Secure` is mandatory for a cross-site iframe, and
+ * `Partitioned` (CHIPS) is what keeps it working as browsers wind down
+ * unpartitioned third-party cookies. Short-lived: a draft session is minutes,
+ * and a stale pointer would keep pinning an old version.
+ */
+export const DRAFT_COOKIE_OPTIONS = {
+  httpOnly: true,
+  secure: true,
+  sameSite: "none",
+  partitioned: true,
+  path: "/",
+  maxAge: 60 * 30,
+} as const;

package/src/draftMiddleware.test.ts

@@ -0,0 +1,117 @@
+import { NextRequest, NextResponse } from "next/server";
+import { describe, expect, it } from "vitest";
+
+import { DRAFT_COOKIE } from "./draft";
+import { applyDraft, prepareDraft, rewriteToDraftRoute } from "./draftMiddleware";
+
+function request(url: string, cookie?: string): NextRequest {
+  const req = new NextRequest(new URL(url), {
+    headers: cookie ? { cookie: `${DRAFT_COOKIE}=${cookie}` } : {},
+  });
+  return req;
+}
+
+describe("prepareDraft", () => {
+  it("reads the pointer from the param", () => {
+    expect(prepareDraft(request("https://site.example/p?__draft=abc@v1")).pointer).toBe("abc@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");
+  });
+
+  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" },
+    });
+    expect(prepareDraft(req).pointer).toBeNull();
+  });
+});
+
+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 res = applyDraft(NextResponse.next(), decision);
+
+    const setCookie = res.headers.get("set-cookie") ?? "";
+    expect(setCookie).toContain(`${DRAFT_COOKIE}=abc%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);
+    expect(setCookie).toMatch(/Secure/i);
+    expect(setCookie).toMatch(/Partitioned/i);
+    expect(setCookie).toMatch(/HttpOnly/i);
+  });
+
+  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 res = applyDraft(NextResponse.next(), decision);
+
+    expect(res.headers.get("cache-control")).toBe("no-store, private");
+    expect(res.headers.get("vary")).toBe("Cookie");
+    expect(res.headers.get("x-robots-tag")).toBe("noindex, nofollow");
+  });
+
+  it("leaves an ordinary response completely untouched", () => {
+    const decision = prepareDraft(request("https://site.example/p"));
+    const res = applyDraft(NextResponse.next(), decision);
+
+    expect(res.headers.get("cache-control")).toBeNull();
+    expect(res.headers.get("vary")).toBeNull();
+    expect(res.headers.get("x-robots-tag")).toBeNull();
+    expect(res.headers.get("set-cookie")).toBeNull();
+  });
+
+  it("clears the cookie on ?__draft=off", () => {
+    const decision = prepareDraft(request("https://site.example/p?__draft=off", "abc@v1"));
+    expect(decision.clearCookie).toBe(true);
+
+    const res = applyDraft(NextResponse.next(), decision);
+    const setCookie = res.headers.get("set-cookie") ?? "";
+    // Deletion is a set with an immediate expiry.
+    expect(setCookie).toContain(DRAFT_COOKIE);
+    expect(setCookie).toMatch(/Max-Age=0|Expires=Thu, 01 Jan 1970/i);
+    // And the response is not treated as a draft render.
+    expect(res.headers.get("cache-control")).toBeNull();
+  });
+});
+
+describe("rewriteToDraftRoute", () => {
+  it("rewrites a drafted request onto the dynamic draft route", () => {
+    const req = request("https://site.example/blog/hello?__draft=abc@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");
+  });
+
+  it("rewrites a cookie-only navigation too", () => {
+    const req = request("https://site.example/blog/hello", "abc@v1");
+    const res = rewriteToDraftRoute(req, prepareDraft(req));
+    expect(new URL(res?.headers.get("x-middleware-rewrite") ?? "").pathname).toBe(
+      "/_draft/blog/hello",
+    );
+  });
+
+  it("leaves an ordinary request alone — ISR must not be disturbed", () => {
+    // The whole point: only drafted requests go dynamic. A shopper's request
+    // must reach the real, statically rendered route untouched.
+    const req = request("https://site.example/blog/hello");
+    expect(rewriteToDraftRoute(req, prepareDraft(req))).toBeNull();
+  });
+
+  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");
+    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");
+    expect(rewriteToDraftRoute(req, prepareDraft(req))).toBeNull();
+  });
+});

package/src/draftMiddleware.ts

@@ -0,0 +1,117 @@
+/**
+ * Draft preview — middleware half.
+ *
+ * Two composable calls, because sites already own their middleware and this
+ * must slot into it rather than replace it:
+ *
+ * ```ts
+ * // middleware.ts (Next <16) / proxy.ts (Next 16+)
+ * export function middleware(request: NextRequest) {
+ *   const decision = prepareDraft(request);
+ *   return applyDraft(NextResponse.next(), decision);
+ * }
+ * ```
+ *
+ * The middleware owns only the cookie and the cache/indexing headers — a
+ * Server Component can read cookies but cannot set them, so that part has to
+ * live here. The pointer itself is read by the page.
+ *
+ * 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 {
+  DRAFT_COOKIE,
+  DRAFT_COOKIE_OPTIONS,
+  type DraftMiddlewareDecision,
+  decideDraft,
+} from "./draft";
+
+/**
+ * Compute the draft decision for a request.
+ *
+ * Only the cookie and the response headers are the middleware's business now —
+ * the page reads the pointer itself from `searchParams` + `cookies()`, so
+ * nothing has to be forwarded through the request. That also means a draft
+ * still works on routes this middleware never matches.
+ */
+export function prepareDraft(request: NextRequest): DraftMiddlewareDecision {
+  return decideDraft(new URL(request.url), request.cookies.get(DRAFT_COOKIE)?.value ?? null);
+}
+
+/**
+ * Route 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.
+ */
+export const DRAFT_ROUTE_PREFIX = "/_draft";
+
+/**
+ * Rewrite a drafted request onto the dynamic draft route.
+ *
+ * This exists because `dynamic` / `revalidate` are STATIC route exports: a
+ * statically rendered page cannot become dynamic for one request. Making the
+ * real route dynamic to support drafts would cost every shopper their cached
+ * page, and — worse — a statically rendered draft would be cached and served to
+ * them. Rewriting sends only drafted requests to a route that is dynamic by
+ * construction, leaving ordinary traffic's ISR completely untouched.
+ *
+ * The original path is preserved in the rewritten pathname, so the draft route
+ * can resolve exactly the page the visitor asked for.
+ *
+ * Returns null when this request is not drafted, so callers fall through to
+ * their normal response.
+ */
+export function rewriteToDraftRoute(
+  request: NextRequest,
+  decision: DraftMiddlewareDecision,
+): NextResponse | null {
+  if (!decision.pointer) return null;
+  const url = request.nextUrl.clone();
+  // Already rewritten (Next re-runs middleware on the rewritten URL in some
+  // configurations) — never nest the prefix.
+  if (url.pathname.startsWith(`${DRAFT_ROUTE_PREFIX}/`)) return null;
+  url.pathname = `${DRAFT_ROUTE_PREFIX}${url.pathname}`;
+  return NextResponse.rewrite(url);
+}
+
+/**
+ * Apply the cookie and the cache/indexing headers a draft response requires.
+ *
+ * The caching headers are the difference between a preview and a **leak**.
+ * With the pointer in a cookie, a draft response and a published one share an
+ * identical URL, so a CDN keyed on URL alone would happily serve unpublished
+ * content to a real visitor. `no-store` is what actually prevents that;
+ * `Vary: Cookie` keeps any intermediary that *does* respect it from mixing the
+ * two; `X-Robots-Tag` keeps a leaked draft out of search results.
+ */
+export function applyDraft(
+  response: NextResponse,
+  decision: DraftMiddlewareDecision,
+): NextResponse {
+  if (decision.clearCookie) {
+    response.cookies.delete(DRAFT_COOKIE);
+  } else if (decision.setCookie) {
+    response.cookies.set(DRAFT_COOKIE, decision.setCookie, DRAFT_COOKIE_OPTIONS);
+  }
+
+  if (decision.pointer) {
+    response.headers.set("cache-control", "no-store, private");
+    response.headers.set("vary", "Cookie");
+    response.headers.set("x-robots-tag", "noindex, nofollow");
+  }
+
+  return response;
+}
+
+/**
+ * Convenience for sites with no middleware of their own: prepare, continue,
+ * apply. Sites that already have middleware should call the two halves
+ * directly so their own logic sits in between.
+ */
+export function draftMiddleware(request: NextRequest): NextResponse {
+  return applyDraft(NextResponse.next(), prepareDraft(request));
+}

package/src/index.ts

@@ -8,6 +8,23 @@ export {
 export { DecoPageRenderer } from "./DecoPageRenderer";
 export { DecoRootLayout, type DecoRootLayoutProps } from "./DecoRootLayout";
 export { DeferredSectionBoundary } from "./DeferredSection";
+export {
+  DRAFT_COOKIE,
+  DRAFT_COOKIE_OPTIONS,
+  DRAFT_PARAM,
+  type DraftMiddlewareDecision,
+  type DraftSearchParams,
+  decideDraft,
+  ensureDraft,
+  registerDraftOverride,
+  selectDraftPointer,
+} from "./draft";
+export {
+  applyDraft,
+  DRAFT_ROUTE_PREFIX,
+  prepareDraft,
+  rewriteToDraftRoute,
+} from "./draftMiddleware";
 export {
   decofileGET,
   decofilePOST,