@prismicio/next 0.0.4 → 0.1.1

package/README.md

@@ -7,8 +7,6 @@
 [![Conventional Commits][conventional-commits-src]][conventional-commits-href]
 [![License][license-src]][license-href]
 
-> ⚠ This project is in an experimental state and therefore primarily meant to be used by Prismic kits. Use it at your own risks or stay tuned for the official release!
-
 <!-- TODO: Replacing link to Prismic with [Prismic][prismic] is useful here -->
 
 A Next.js Integration with Prismic that makes it easier to take advantage of Next.js features.

package/dist/index.cjs

@@ -2,19 +2,40 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+const prismic = require('@prismicio/client');
 const React = require('react');
 const react = require('@prismicio/react');
+const router = require('next/router');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+function _interopNamespace(e) {
+	if (e && e.__esModule) return e;
+	const n = Object.create(null);
+	if (e) {
+		for (const k in e) {
+			if (k !== 'default') {
+				const d = Object.getOwnPropertyDescriptor(e, k);
+				Object.defineProperty(n, k, d.get ? d : {
+					enumerable: true,
+					get: function () { return e[k]; }
+				});
+			}
+		}
+	}
+	n["default"] = e;
+	return Object.freeze(n);
+}
+
+const prismic__namespace = /*#__PURE__*/_interopNamespace(prismic);
 const React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 async function setPreviewData({
   req,
   res
 }) {
-  if (req.query.token) {
-    const { token: ref } = req.query;
+  const ref = req.query.token || req.cookies[prismic__namespace.cookie.preview];
+  if (ref) {
     res.setPreviewData({ ref });
   }
 }
@@ -32,6 +53,50 @@ function exitPreview(config) {
   config.res.redirect("/");
 }
 
+const readValue = (value) => {
+  return value.replace(/%3B/g, ";");
+};
+const parse = (cookieString) => {
+  const result = {};
+  const cookies = cookieString.split("; ");
+  for (const cookie of cookies) {
+    const parts = cookie.split("=");
+    const value = parts.slice(1).join("=");
+    const name = readValue(parts[0]).replace(/%3D/g, "=");
+    result[name] = readValue(value);
+  }
+  return result;
+};
+const getAll = (cookieStore) => parse(cookieStore);
+const getCookie = (name, cookieStore) => getAll(cookieStore)[name];
+
+const extractFirstSubdomain = (host) => host.split(".")[0];
+const extractRepositoryNameFromObjectRef = (previewRef) => {
+  try {
+    const parsed = JSON.parse(decodeURIComponent(previewRef));
+    const keys = Object.keys(parsed);
+    const domainKey = keys.find((key) => /\.prismic\.io$/.test(key));
+    if (domainKey) {
+      return extractFirstSubdomain(domainKey);
+    } else {
+      return void 0;
+    }
+  } catch (e) {
+    return void 0;
+  }
+};
+const extractRepositoryNameFromURLRef = (previewRef) => {
+  try {
+    const url = new URL(previewRef);
+    return extractFirstSubdomain(url.host);
+  } catch (e) {
+    return void 0;
+  }
+};
+const extractPreviewRefRepositoryName = (previewRef) => {
+  return extractRepositoryNameFromObjectRef(previewRef) || extractRepositoryNameFromURLRef(previewRef);
+};
+
 const isPrismicUpdateToolbarEvent = (event) => {
   return "detail" in event && typeof event.detail.ref === "string";
 };
@@ -41,27 +106,36 @@ function PrismicPreview({
   updatePreviewURL = "/api/preview",
   exitPreviewURL = "/api/exit-preview"
 }) {
+  const router$1 = router.useRouter();
   React.useEffect(() => {
-    const prismicPreviewUpdate = async (event) => {
+    const previewRefRepositoryName = extractPreviewRefRepositoryName(getCookie("io.prismic.preview", globalThis.document.cookie));
+    const startPreviewIfLoadedFromSharedLink = async () => {
+      if (previewRefRepositoryName === repositoryName && !router$1.isPreview) {
+        await fetch(updatePreviewURL);
+        window.location.reload();
+      }
+    };
+    startPreviewIfLoadedFromSharedLink();
+    const handlePrismicPreviewUpdate = async (event) => {
       if (isPrismicUpdateToolbarEvent(event)) {
         event.preventDefault();
-        await fetch(`${updatePreviewURL}?token=${event.detail.ref}`);
+        await fetch(updatePreviewURL);
         window.location.reload();
       }
     };
-    const prismicPreviewEnd = async (event) => {
+    const handlePrismicPreviewEnd = async (event) => {
       event.preventDefault();
       await fetch(exitPreviewURL);
       window.location.reload();
     };
     if (window) {
-      window.addEventListener("prismicPreviewUpdate", prismicPreviewUpdate);
-      window.addEventListener("prismicPreviewEnd", prismicPreviewEnd);
+      window.addEventListener("prismicPreviewUpdate", handlePrismicPreviewUpdate);
+      window.addEventListener("prismicPreviewEnd", handlePrismicPreviewEnd);
     }
     return () => {
       if (window) {
-        window.removeEventListener("prismicPreviewUpdate", prismicPreviewUpdate);
-        window.removeEventListener("prismicPreviewEnd", prismicPreviewEnd);
+        window.removeEventListener("prismicPreviewUpdate", handlePrismicPreviewUpdate);
+        window.removeEventListener("prismicPreviewEnd", handlePrismicPreviewEnd);
       }
     };
   }, []);
@@ -74,8 +148,8 @@ const isPrismicNextPreviewData = (previewData) => {
   return typeof previewData === "object" && "ref" in previewData;
 };
 const enableAutoPreviews = (config) => {
-  if ("context" in config && config.context) {
-    const previewData = config.context.previewData;
+  if ("previewData" in config && config.previewData) {
+    const { previewData } = config;
     if (isPrismicNextPreviewData(previewData) && previewData.ref) {
       config.client.queryContentFromRef(previewData.ref);
     }

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import { NextApiRequest, NextApiResponse, PreviewData } from 'next';
 import { Client, HttpRequestLike } from '@prismicio/client';
-import { LinkResolverFunction } from '@prismicio/helpers';
 import React from 'react';
+import { LinkResolverFunction } from '@prismicio/helpers';
 
 /**
  * Configuration for `setPreviewData`.
@@ -15,6 +15,7 @@ declare type SetPreviewDataConfig = {
      */
     req: {
         query: NextApiRequest["query"];
+        cookies: NextApiRequest["cookies"];
     };
     /**
      * The `res` object from a Next.js API route. This is given as a parameter to
@@ -31,70 +32,6 @@ declare type SetPreviewDataConfig = {
  */
 declare function setPreviewData({ req, res, }: SetPreviewDataConfig): Promise<void>;
 
-/**
- * Next.js context object from APIs supporting Preview Mode. This includes the
- * context object from `getStaticProps` and `getServerSideProps`.
- */
-declare type NextContextLike<TPreviewData extends PreviewData = PreviewData> = {
-    previewData?: TPreviewData;
-};
-/**
- * Configuration for creating a Prismic client with automatic preview support in
- * Next.js apps.
- */
-declare type CreateClientConfig = {
-    /**
-     * A Next.js context object (such as the context object from `getStaticProps`
-     * or `getServerSideProps`).
-     *
-     * Pass a `context` when using outside a Next.js API endpoint.
-     */
-    context?: NextContextLike;
-    /**
-     * A Next.js API endpoint request object.
-     *
-     * Pass a `req` object when using in a Next.js API endpoint.
-     */
-    req?: NextApiRequest;
-};
-/**
- * Preview config for enabling previews with redirectToPreviewURL
- */
-declare type PreviewConfig = {
-    /**
-     * The `req` object from a Next.js API route. This is given as a parameter to
-     * the API route.
-     *
-     * @see Next.js API route docs: {@link https://nextjs.org/docs/api-routes/introduction}
-     */
-    req: {
-        query: NextApiRequest["query"];
-    };
-    /**
-     * The `res` object from a Next.js API route. This is given as a parameter to
-     * the API route.
-     *
-     * @see Next.js API route docs: {@link https://nextjs.org/docs/api-routes/introduction}
-     */
-    res: {
-        redirect: NextApiResponse["redirect"];
-    };
-    /**
-     * The Prismic client configured for the preview session's repository.
-     */
-    client: Client;
-    /**
-     * A Link Resolver used to resolve the previewed document's URL.
-     *
-     * @see To learn more about Link Resolver: {@link https://prismic.io/docs/core-concepts/link-resolver-route-resolver}
-     */
-    linkResolver?: LinkResolverFunction;
-    /**
-     * The default redirect URL if a URL cannot be determined for the previewed document.
-     */
-    defaultURL?: string;
-};
-
 /**
  * Configuration for `enableAutoPreviews`.
  *
@@ -113,7 +50,7 @@ declare type EnableAutoPreviewsConfig<TPreviewData extends PreviewData = Preview
      * Pass a `context` object when using `enableAutoPreviews` outside a
      * Next.js API endpoint.
      */
-    context?: NextContextLike<TPreviewData>;
+    previewData?: TPreviewData;
 } | {
     /**
      * A Next.js API endpoint request object.
@@ -129,7 +66,7 @@ declare type EnableAutoPreviewsConfig<TPreviewData extends PreviewData = Preview
  *
  * @param config - Configuration for the function.
  */
-declare const enableAutoPreviews: <TPreviewData extends PreviewData = PreviewData>(config: EnableAutoPreviewsConfig<TPreviewData>) => void;
+declare const enableAutoPreviews: <TPreviewData extends PreviewData>(config: EnableAutoPreviewsConfig<TPreviewData>) => void;
 
 /**
  * Configuration for `exitPreview`.
@@ -203,4 +140,61 @@ declare function PrismicPreview({ repositoryName, children, updatePreviewURL, ex
  */
 declare function redirectToPreviewURL({ req, res, client, linkResolver, defaultURL, }: PreviewConfig): Promise<void>;
 
-export { CreateClientConfig, EnableAutoPreviewsConfig, ExitPreviewConfig as ExitPreviewParams, NextContextLike, PreviewConfig, PrismicPreview, SetPreviewDataConfig, enableAutoPreviews, exitPreview, redirectToPreviewURL, setPreviewData };
+/**
+ * Configuration for creating a Prismic client with automatic preview support in
+ * Next.js apps.
+ */
+declare type CreateClientConfig = {
+    /**
+     * Preview data coming from Next.js context object. This context object comes
+     * from `getStaticProps` or `getServerSideProps`.
+     *
+     * Pass `previewData` when using outside a Next.js API endpoint.
+     */
+    previewData?: PreviewData;
+    /**
+     * A Next.js API endpoint request object.
+     *
+     * Pass a `req` object when using in a Next.js API endpoint.
+     */
+    req?: NextApiRequest;
+};
+/**
+ * Preview config for enabling previews with redirectToPreviewURL
+ */
+declare type PreviewConfig = {
+    /**
+     * The `req` object from a Next.js API route. This is given as a parameter to
+     * the API route.
+     *
+     * @see Next.js API route docs: {@link https://nextjs.org/docs/api-routes/introduction}
+     */
+    req: {
+        query: NextApiRequest["query"];
+    };
+    /**
+     * The `res` object from a Next.js API route. This is given as a parameter to
+     * the API route.
+     *
+     * @see Next.js API route docs: {@link https://nextjs.org/docs/api-routes/introduction}
+     */
+    res: {
+        redirect: NextApiResponse["redirect"];
+    };
+    /**
+     * The Prismic client configured for the preview session's repository.
+     */
+    client: Client;
+    /**
+     * A Link Resolver used to resolve the previewed document's URL.
+     *
+     * @see To learn more about Link Resolver: {@link https://prismic.io/docs/core-concepts/link-resolver-route-resolver}
+     */
+    linkResolver?: LinkResolverFunction;
+    /**
+     * The default redirect URL if a URL cannot be determined for the previewed document.
+     */
+    defaultURL?: string;
+};
+
+export { CreateClientConfig, EnableAutoPreviewsConfig, ExitPreviewConfig as ExitPreviewParams, PreviewConfig, PrismicPreview, PrismicPreviewProps, SetPreviewDataConfig, enableAutoPreviews, exitPreview, redirectToPreviewURL, setPreviewData };

package/dist/index.mjs

@@ -1,12 +1,14 @@
+import * as prismic from '@prismicio/client';
 import React, { useEffect } from 'react';
 import { PrismicToolbar } from '@prismicio/react';
+import { useRouter } from 'next/router';
 
 async function setPreviewData({
   req,
   res
 }) {
-  if (req.query.token) {
-    const { token: ref } = req.query;
+  const ref = req.query.token || req.cookies[prismic.cookie.preview];
+  if (ref) {
     res.setPreviewData({ ref });
   }
 }
@@ -24,6 +26,50 @@ function exitPreview(config) {
   config.res.redirect("/");
 }
 
+const readValue = (value) => {
+  return value.replace(/%3B/g, ";");
+};
+const parse = (cookieString) => {
+  const result = {};
+  const cookies = cookieString.split("; ");
+  for (const cookie of cookies) {
+    const parts = cookie.split("=");
+    const value = parts.slice(1).join("=");
+    const name = readValue(parts[0]).replace(/%3D/g, "=");
+    result[name] = readValue(value);
+  }
+  return result;
+};
+const getAll = (cookieStore) => parse(cookieStore);
+const getCookie = (name, cookieStore) => getAll(cookieStore)[name];
+
+const extractFirstSubdomain = (host) => host.split(".")[0];
+const extractRepositoryNameFromObjectRef = (previewRef) => {
+  try {
+    const parsed = JSON.parse(decodeURIComponent(previewRef));
+    const keys = Object.keys(parsed);
+    const domainKey = keys.find((key) => /\.prismic\.io$/.test(key));
+    if (domainKey) {
+      return extractFirstSubdomain(domainKey);
+    } else {
+      return void 0;
+    }
+  } catch (e) {
+    return void 0;
+  }
+};
+const extractRepositoryNameFromURLRef = (previewRef) => {
+  try {
+    const url = new URL(previewRef);
+    return extractFirstSubdomain(url.host);
+  } catch (e) {
+    return void 0;
+  }
+};
+const extractPreviewRefRepositoryName = (previewRef) => {
+  return extractRepositoryNameFromObjectRef(previewRef) || extractRepositoryNameFromURLRef(previewRef);
+};
+
 const isPrismicUpdateToolbarEvent = (event) => {
   return "detail" in event && typeof event.detail.ref === "string";
 };
@@ -33,27 +79,36 @@ function PrismicPreview({
   updatePreviewURL = "/api/preview",
   exitPreviewURL = "/api/exit-preview"
 }) {
+  const router = useRouter();
   useEffect(() => {
-    const prismicPreviewUpdate = async (event) => {
+    const previewRefRepositoryName = extractPreviewRefRepositoryName(getCookie("io.prismic.preview", globalThis.document.cookie));
+    const startPreviewIfLoadedFromSharedLink = async () => {
+      if (previewRefRepositoryName === repositoryName && !router.isPreview) {
+        await fetch(updatePreviewURL);
+        window.location.reload();
+      }
+    };
+    startPreviewIfLoadedFromSharedLink();
+    const handlePrismicPreviewUpdate = async (event) => {
       if (isPrismicUpdateToolbarEvent(event)) {
         event.preventDefault();
-        await fetch(`${updatePreviewURL}?token=${event.detail.ref}`);
+        await fetch(updatePreviewURL);
         window.location.reload();
       }
     };
-    const prismicPreviewEnd = async (event) => {
+    const handlePrismicPreviewEnd = async (event) => {
       event.preventDefault();
       await fetch(exitPreviewURL);
       window.location.reload();
     };
     if (window) {
-      window.addEventListener("prismicPreviewUpdate", prismicPreviewUpdate);
-      window.addEventListener("prismicPreviewEnd", prismicPreviewEnd);
+      window.addEventListener("prismicPreviewUpdate", handlePrismicPreviewUpdate);
+      window.addEventListener("prismicPreviewEnd", handlePrismicPreviewEnd);
     }
     return () => {
       if (window) {
-        window.removeEventListener("prismicPreviewUpdate", prismicPreviewUpdate);
-        window.removeEventListener("prismicPreviewEnd", prismicPreviewEnd);
+        window.removeEventListener("prismicPreviewUpdate", handlePrismicPreviewUpdate);
+        window.removeEventListener("prismicPreviewEnd", handlePrismicPreviewEnd);
       }
     };
   }, []);
@@ -66,8 +121,8 @@ const isPrismicNextPreviewData = (previewData) => {
   return typeof previewData === "object" && "ref" in previewData;
 };
 const enableAutoPreviews = (config) => {
-  if ("context" in config && config.context) {
-    const previewData = config.context.previewData;
+  if ("previewData" in config && config.previewData) {
+    const { previewData } = config;
     if (isPrismicNextPreviewData(previewData) && previewData.ref) {
       config.client.queryContentFromRef(previewData.ref);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@prismicio/next",
-	"version": "0.0.4",
+	"version": "0.1.1",
 	"description": "Integrate Prismic into a Next.js app",
 	"keywords": [
 		"typescript",
@@ -44,13 +44,13 @@
 		"unit": "nyc --reporter=lcovonly --reporter=text --exclude-after-remap=false ava"
 	},
 	"dependencies": {
-		"@prismicio/react": "^2.0.2"
+		"@prismicio/react": "^2.2.0"
 	},
 	"devDependencies": {
-		"@prismicio/client": "^6.0.0-beta.0",
+		"@prismicio/client": "^6.0.0",
 		"@prismicio/mock": "^0.0.6",
 		"@prismicio/types": "^0.1.13",
-		"@testing-library/react": "^12.1.2",
+		"@testing-library/react": "^12.1.4",
 		"@types/jsdom": "^16.2.13",
 		"@types/jsdom-global": "^3.0.2",
 		"@types/node-fetch": "^3.0.3",
@@ -69,7 +69,7 @@
 		"nyc": "^15.1.0",
 		"prettier": "^2.3.2",
 		"prettier-plugin-jsdoc": "^0.3.30",
-		"react-test-renderer": "^17.0.2",
+		"react-test-renderer": "^18.0.0",
 		"sinon": "^12.0.1",
 		"siroc": "^0.15.0",
 		"standard-version": "^9.3.1",
@@ -77,9 +77,9 @@
 		"typescript": "^4.3.5"
 	},
 	"peerDependencies": {
-		"@prismicio/client": "^6.0.0-beta.0",
+		"@prismicio/client": "^6.0.0",
 		"next": "^11 || ^12",
-		"react": "^17"
+		"react": "^17 || ^18"
 	},
 	"engines": {
 		"node": ">=12.7.0"

package/src/PrismicPreview.tsx

@@ -1,10 +1,14 @@
 import React, { useEffect } from "react";
 import { PrismicToolbar } from "@prismicio/react";
+import { useRouter } from "next/router";
+
+import { getCookie } from "../lib/getCookie";
+import { extractPreviewRefRepositoryName } from "../lib/extractPreviewRefRepositoryName";
 
 /**
  * Props for `<PrismicPreview>`.
  */
-type PrismicPreviewProps = {
+export type PrismicPreviewProps = {
 	/**
 	 * The name of your Prismic repository. A Prismic Toolbar will be registered
 	 * using this repository.
@@ -56,38 +60,66 @@ export function PrismicPreview({
 	updatePreviewURL = "/api/preview",
 	exitPreviewURL = "/api/exit-preview",
 }: PrismicPreviewProps): JSX.Element {
+	const router = useRouter();
+
 	useEffect(() => {
-		const prismicPreviewUpdate = async (event: Event) => {
+		const previewRefRepositoryName = extractPreviewRefRepositoryName(
+			getCookie("io.prismic.preview", globalThis.document.cookie) as string,
+		);
+
+		const startPreviewIfLoadedFromSharedLink = async () => {
+			if (previewRefRepositoryName === repositoryName && !router.isPreview) {
+				await fetch(updatePreviewURL);
+				window.location.reload();
+			}
+		};
+
+		startPreviewIfLoadedFromSharedLink();
+
+		const handlePrismicPreviewUpdate = async (event: Event) => {
 			if (isPrismicUpdateToolbarEvent(event)) {
 				// Prevent the toolbar from reloading the page.
 				event.preventDefault();
-				// Update the preview cookie.
-				await fetch(`${updatePreviewURL}?token=${event.detail.ref}`);
 
-				// Reload the page with the updated token.
+				// Start Next.js Preview Mode via the given preview API endpoint.
+				await fetch(updatePreviewURL);
+
+				// Reload the page with an active Preview Mode.
 				window.location.reload();
 			}
 		};
 
-		const prismicPreviewEnd = async (event: Event) => {
+		const handlePrismicPreviewEnd = async (event: Event) => {
+			// Prevent the toolbar from reloading the page.
 			event.preventDefault();
+
+			// Exit Next.js Preview Mode via the given preview API endpoint.
 			await fetch(exitPreviewURL);
+
+			// Reload the page with an active Preview Mode.
 			window.location.reload();
 		};
 
+		// Register Prismic Toolbar event handlers.
 		if (window) {
-			window.addEventListener("prismicPreviewUpdate", prismicPreviewUpdate);
-
-			window.addEventListener("prismicPreviewEnd", prismicPreviewEnd);
+			window.addEventListener(
+				"prismicPreviewUpdate",
+				handlePrismicPreviewUpdate,
+			);
+			window.addEventListener("prismicPreviewEnd", handlePrismicPreviewEnd);
 		}
 
+		// On cleanup, unregister Prismic Toolbar event handlers.
 		return () => {
 			if (window) {
 				window.removeEventListener(
 					"prismicPreviewUpdate",
-					prismicPreviewUpdate,
+					handlePrismicPreviewUpdate,
+				);
+				window.removeEventListener(
+					"prismicPreviewEnd",
+					handlePrismicPreviewEnd,
 				);
-				window.removeEventListener("prismicPreviewEnd", prismicPreviewEnd);
 			}
 		};
 	}, []);

package/src/enableAutoPreviews.ts

@@ -1,6 +1,5 @@
 import { PreviewData } from "next";
 import { Client, HttpRequestLike } from "@prismicio/client";
-import { NextContextLike } from "./types";
 
 interface PrismicNextPreviewData {
 	ref: string;
@@ -40,7 +39,7 @@ export type EnableAutoPreviewsConfig<
 			 * Pass a `context` object when using `enableAutoPreviews` outside a
 			 * Next.js API endpoint.
 			 */
-			context?: NextContextLike<TPreviewData>;
+			previewData?: TPreviewData;
 	  }
 	| {
 			/**
@@ -58,16 +57,14 @@ export type EnableAutoPreviewsConfig<
  *
  * @param config - Configuration for the function.
  */
-export const enableAutoPreviews = <
-	TPreviewData extends PreviewData = PreviewData,
->(
+export const enableAutoPreviews = <TPreviewData extends PreviewData>(
 	config: EnableAutoPreviewsConfig<TPreviewData>,
 ): void => {
 	/**
 	 * If preview data is being passed from Next Context then use queryContentFromRef
 	 */
-	if ("context" in config && config.context) {
-		const previewData = config.context.previewData;
+	if ("previewData" in config && config.previewData) {
+		const { previewData } = config;
 
 		if (isPrismicNextPreviewData(previewData) && previewData.ref) {
 			config.client.queryContentFromRef(previewData.ref);

package/src/index.ts

@@ -1,13 +1,10 @@
 export type { SetPreviewDataConfig } from "./setPreviewData";
 export type { EnableAutoPreviewsConfig } from "./enableAutoPreviews";
 export type { ExitPreviewConfig as ExitPreviewParams } from "./exitPreview";
+export type { PrismicPreviewProps } from "./PrismicPreview";
 export { setPreviewData } from "./setPreviewData";
 export { exitPreview } from "./exitPreview";
 export { PrismicPreview } from "./PrismicPreview";
 export { enableAutoPreviews } from "./enableAutoPreviews";
 export { redirectToPreviewURL } from "./redirectToPreviewURL";
-export type {
-	NextContextLike,
-	CreateClientConfig,
-	PreviewConfig,
-} from "./types";
+export type { CreateClientConfig, PreviewConfig } from "./types";

package/src/setPreviewData.ts

@@ -1,4 +1,5 @@
 import { NextApiResponse, NextApiRequest } from "next";
+import * as prismic from "@prismicio/client";
 
 /**
  * Configuration for `setPreviewData`.
@@ -12,6 +13,7 @@ export type SetPreviewDataConfig = {
 	 */
 	req: {
 		query: NextApiRequest["query"];
+		cookies: NextApiRequest["cookies"];
 	};
 
 	/**
@@ -32,8 +34,9 @@ export async function setPreviewData({
 	req,
 	res,
 }: SetPreviewDataConfig): Promise<void> {
-	if (req.query.token) {
-		const { token: ref } = req.query;
+	const ref = req.query.token || req.cookies[prismic.cookie.preview];
+
+	if (ref) {
 		res.setPreviewData({ ref });
 	}
 }

package/src/types.ts

@@ -2,26 +2,18 @@ import { PreviewData, NextApiRequest, NextApiResponse } from "next";
 import { LinkResolverFunction } from "@prismicio/helpers";
 import { Client } from "@prismicio/client";
 
-/**
- * Next.js context object from APIs supporting Preview Mode. This includes the
- * context object from `getStaticProps` and `getServerSideProps`.
- */
-export type NextContextLike<TPreviewData extends PreviewData = PreviewData> = {
-	previewData?: TPreviewData;
-};
-
 /**
  * Configuration for creating a Prismic client with automatic preview support in
  * Next.js apps.
  */
 export type CreateClientConfig = {
 	/**
-	 * A Next.js context object (such as the context object from `getStaticProps`
-	 * or `getServerSideProps`).
+	 * Preview data coming from Next.js context object. This context object comes
+	 * from `getStaticProps` or `getServerSideProps`.
 	 *
-	 * Pass a `context` when using outside a Next.js API endpoint.
+	 * Pass `previewData` when using outside a Next.js API endpoint.
 	 */
-	context?: NextContextLike;
+	previewData?: PreviewData;
 
 	/**
 	 * A Next.js API endpoint request object.