@prismicio/next 1.1.0-alpha.0 → 1.1.0-alpha.2

package/dist/setPreviewData.cjs

@@ -1,25 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const prismic = require("@prismicio/client");
-function _interopNamespaceDefault(e) {
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  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: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-const prismic__namespace = /* @__PURE__ */ _interopNamespaceDefault(prismic);
+const cookie = require('./_node_modules/@prismicio/client/dist/cookie.cjs');
 function setPreviewData({ req, res }) {
-  const ref = req.query.token || req.cookies[prismic__namespace.cookie.preview];
+  const ref = req.query.token || req.cookies[cookie.preview];
   if (ref) {
     res.setPreviewData({ ref });
   }

package/dist/setPreviewData.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"setPreviewData.cjs","sources":["../../src/setPreviewData.ts"],"sourcesContent":["import { NextApiResponse, NextApiRequest } from \"next\";\nimport * as prismic from \"@prismicio/client\";\n\n/**\n * Configuration for `setPreviewData`.\n */\nexport type SetPreviewDataConfig = {\n\t/**\n\t * The `req` object from a Next.js API route. This is given as a parameter to\n\t * the API route.\n\t *\n\t * @see Next.js API route docs: {@link https://nextjs.org/docs/api-routes/introduction}\n\t */\n\treq: {\n\t\tquery: NextApiRequest[\"query\"];\n\t\tcookies: NextApiRequest[\"cookies\"];\n\t};\n\n\t/**\n\t * The `res` object from a Next.js API route. This is given as a parameter to\n\t * the API route.\n\t *\n\t * @see Next.js API route docs: {@link https://nextjs.org/docs/api-routes/introduction}\n\t */\n\tres: {\n\t\tsetPreviewData: NextApiResponse[\"setPreviewData\"];\n\t};\n};\n\n/**\n * Set Prismic preview data for Next.js's Preview Mode.\n */\nexport function setPreviewData({ req, res }: SetPreviewDataConfig): void {\n\tconst ref = req.query.token || req.cookies[prismic.cookie.preview];\n\n\tif (ref) {\n\t\tres.setPreviewData({ ref });\n\t}\n}\n"],"names":["prismic"],"mappings":";;;;;;;;;;;;;;;;;;;;SAgCgB,eAAe,EAAE,KAAK,OAA2B;AAC1D,QAAA,MAAM,IAAI,MAAM,SAAS,IAAI,QAAQA,mBAAQ,OAAO,OAAO;AAEjE,MAAI,KAAK;AACJ,QAAA,eAAe,EAAE,IAAA,CAAK;AAAA,EAC1B;AACF;;"}
+{"version":3,"file":"setPreviewData.cjs","sources":["../../src/setPreviewData.ts"],"sourcesContent":["import * as prismic from \"@prismicio/client\";\n\nimport { NextApiRequestLike, NextApiResponseLike } from \"./types\";\n\n/**\n * Configuration for `setPreviewData`.\n */\nexport type SetPreviewDataConfig = {\n\t/**\n\t * The `req` object from a Next.js API route.\n\t *\n\t * @see Next.js API route docs: \\<https://nextjs.org/docs/api-routes/introduction\\>\n\t */\n\treq: NextApiRequestLike;\n\n\t/**\n\t * The `res` object from a Next.js API route.\n\t *\n\t * @see Next.js API route docs: \\<https://nextjs.org/docs/api-routes/introduction\\>\n\t */\n\tres: NextApiResponseLike;\n};\n\n/**\n * **Only use this function in the Pages Directory (/pages).**\n *\n * Set Prismic preview data for Next.js's Preview Mode.\n */\nexport function setPreviewData({ req, res }: SetPreviewDataConfig): void {\n\tconst ref = req.query.token || req.cookies[prismic.cookie.preview];\n\n\tif (ref) {\n\t\tres.setPreviewData({ ref });\n\t}\n}\n"],"names":["prismic.cookie.preview"],"mappings":";;;SA4BgB,eAAe,EAAE,KAAK,OAA2B;AAC1D,QAAA,MAAM,IAAI,MAAM,SAAS,IAAI,QAAQA,OAAAA,OAAsB;AAEjE,MAAI,KAAK;AACJ,QAAA,eAAe,EAAE,IAAA,CAAK;AAAA,EAC1B;AACF;;"}

package/dist/setPreviewData.d.ts

@@ -1,29 +1,24 @@
-import { NextApiResponse, NextApiRequest } from "next";
+import { NextApiRequestLike, NextApiResponseLike } from "./types";
 /**
  * Configuration for `setPreviewData`.
  */
 export type SetPreviewDataConfig = {
     /**
-     * The `req` object from a Next.js API route. This is given as a parameter to
-     * the API route.
+     * The `req` object from a Next.js API route.
      *
-     * @see Next.js API route docs: {@link https://nextjs.org/docs/api-routes/introduction}
+     * @see Next.js API route docs: \<https://nextjs.org/docs/api-routes/introduction\>
      */
-    req: {
-        query: NextApiRequest["query"];
-        cookies: NextApiRequest["cookies"];
-    };
+    req: NextApiRequestLike;
     /**
-     * The `res` object from a Next.js API route. This is given as a parameter to
-     * the API route.
+     * The `res` object from a Next.js API route.
      *
-     * @see Next.js API route docs: {@link https://nextjs.org/docs/api-routes/introduction}
+     * @see Next.js API route docs: \<https://nextjs.org/docs/api-routes/introduction\>
      */
-    res: {
-        setPreviewData: NextApiResponse["setPreviewData"];
-    };
+    res: NextApiResponseLike;
 };
 /**
+ * **Only use this function in the Pages Directory (/pages).**
+ *
  * Set Prismic preview data for Next.js's Preview Mode.
  */
 export declare function setPreviewData({ req, res }: SetPreviewDataConfig): void;

package/dist/setPreviewData.js

@@ -1,6 +1,6 @@
-import * as prismic from "@prismicio/client";
+import { preview } from './_node_modules/@prismicio/client/dist/cookie.js';
 function setPreviewData({ req, res }) {
-  const ref = req.query.token || req.cookies[prismic.cookie.preview];
+  const ref = req.query.token || req.cookies[preview];
   if (ref) {
     res.setPreviewData({ ref });
   }

package/dist/setPreviewData.js.map

@@ -1 +1 @@
-{"version":3,"file":"setPreviewData.js","sources":["../../src/setPreviewData.ts"],"sourcesContent":["import { NextApiResponse, NextApiRequest } from \"next\";\nimport * as prismic from \"@prismicio/client\";\n\n/**\n * Configuration for `setPreviewData`.\n */\nexport type SetPreviewDataConfig = {\n\t/**\n\t * The `req` object from a Next.js API route. This is given as a parameter to\n\t * the API route.\n\t *\n\t * @see Next.js API route docs: {@link https://nextjs.org/docs/api-routes/introduction}\n\t */\n\treq: {\n\t\tquery: NextApiRequest[\"query\"];\n\t\tcookies: NextApiRequest[\"cookies\"];\n\t};\n\n\t/**\n\t * The `res` object from a Next.js API route. This is given as a parameter to\n\t * the API route.\n\t *\n\t * @see Next.js API route docs: {@link https://nextjs.org/docs/api-routes/introduction}\n\t */\n\tres: {\n\t\tsetPreviewData: NextApiResponse[\"setPreviewData\"];\n\t};\n};\n\n/**\n * Set Prismic preview data for Next.js's Preview Mode.\n */\nexport function setPreviewData({ req, res }: SetPreviewDataConfig): void {\n\tconst ref = req.query.token || req.cookies[prismic.cookie.preview];\n\n\tif (ref) {\n\t\tres.setPreviewData({ ref });\n\t}\n}\n"],"names":[],"mappings":";SAgCgB,eAAe,EAAE,KAAK,OAA2B;AAC1D,QAAA,MAAM,IAAI,MAAM,SAAS,IAAI,QAAQ,QAAQ,OAAO,OAAO;AAEjE,MAAI,KAAK;AACJ,QAAA,eAAe,EAAE,IAAA,CAAK;AAAA,EAC1B;AACF;"}
+{"version":3,"file":"setPreviewData.js","sources":["../../src/setPreviewData.ts"],"sourcesContent":["import * as prismic from \"@prismicio/client\";\n\nimport { NextApiRequestLike, NextApiResponseLike } from \"./types\";\n\n/**\n * Configuration for `setPreviewData`.\n */\nexport type SetPreviewDataConfig = {\n\t/**\n\t * The `req` object from a Next.js API route.\n\t *\n\t * @see Next.js API route docs: \\<https://nextjs.org/docs/api-routes/introduction\\>\n\t */\n\treq: NextApiRequestLike;\n\n\t/**\n\t * The `res` object from a Next.js API route.\n\t *\n\t * @see Next.js API route docs: \\<https://nextjs.org/docs/api-routes/introduction\\>\n\t */\n\tres: NextApiResponseLike;\n};\n\n/**\n * **Only use this function in the Pages Directory (/pages).**\n *\n * Set Prismic preview data for Next.js's Preview Mode.\n */\nexport function setPreviewData({ req, res }: SetPreviewDataConfig): void {\n\tconst ref = req.query.token || req.cookies[prismic.cookie.preview];\n\n\tif (ref) {\n\t\tres.setPreviewData({ ref });\n\t}\n}\n"],"names":["prismic.cookie.preview"],"mappings":";SA4BgB,eAAe,EAAE,KAAK,OAA2B;AAC1D,QAAA,MAAM,IAAI,MAAM,SAAS,IAAI,QAAQA,OAAsB;AAEjE,MAAI,KAAK;AACJ,QAAA,eAAe,EAAE,IAAA,CAAK;AAAA,EAC1B;AACF;"}

package/dist/types.d.ts

@@ -1,21 +1,64 @@
-import type { PreviewData, NextApiRequest } from "next";
+import type { PreviewData } from "next";
 import type { ClientConfig } from "@prismicio/client";
+declare module "@prismicio/client" {
+    interface RequestInitLike {
+        next?: RequestInit["next"];
+    }
+}
 /**
  * Configuration for creating a Prismic client with automatic preview support in
  * Next.js apps.
  */
-export type CreateClientConfig = {
+export type CreateClientConfig = ClientConfig & {
     /**
-     * Preview data coming from Next.js context object. This context object comes
-     * from `getStaticProps` or `getServerSideProps`.
+     * **Only used in the Pages Directory (/pages).**
      *
-     * Pass `previewData` when using outside a Next.js API endpoint.
+     * The `previewData` object provided in the `getStaticProps()` or
+     * `getServerSideProps()` context object.
      */
     previewData?: PreviewData;
     /**
-     * A Next.js API endpoint request object.
+     * **Only used in the Pages Directory (/pages).**
      *
-     * Pass a `req` object when using in a Next.js API endpoint.
+     * The `req` object from a Next.js API route.
+     *
+     * @see Next.js API route docs: \<https://nextjs.org/docs/api-routes/introduction\>
      */
-    req?: NextApiRequest;
-} & ClientConfig;
+    req?: NextApiRequestLike;
+};
+/**
+ * The minimal set of properties needed from `next`'s `NextRequest` type.
+ *
+ * This request type is only compatible with Route Handlers defined in the `app`
+ * directory.
+ */
+export type NextRequestLike = {
+    headers: {
+        get(name: string): string | null;
+    };
+    url: string;
+    nextUrl: unknown;
+};
+/**
+ * The minimal set of properties needed from `next`'s `NextApiRequest` type.
+ *
+ * This request type is only compatible with API routes defined in the `pages`
+ * directory.
+ */
+export type NextApiRequestLike = {
+    query: Partial<Record<string, string | string[]>>;
+    cookies: Partial<Record<string, string>>;
+};
+/**
+ * The minimal set of properties needed from `next`'s `NextApiResponse` type.
+ *
+ * This request type is only compatible with API routes defined in the `pages`
+ * directory.
+ */
+export type NextApiResponseLike = {
+    redirect(url: string): NextApiResponseLike;
+    clearPreviewData(): NextApiResponseLike;
+    status(statusCode: number): NextApiResponseLike;
+    json(body: any): void;
+    setPreviewData(data: object | string): NextApiResponseLike;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@prismicio/next",
-	"version": "1.1.0-alpha.0",
+	"version": "1.1.0-alpha.2",
 	"description": "Helpers to integrate Prismic into Next.js apps",
 	"keywords": [
 		"typescript",
@@ -18,14 +18,8 @@
 	"sideEffects": false,
 	"exports": {
 		".": {
-			"react-server": {
-				"import": "./dist/react-server.js",
-				"require": "./dist/react-server.cjs"
-			},
-			"default": {
-				"import": "./dist/index.js",
-				"require": "./dist/index.cjs"
-			}
+			"import": "./dist/index.js",
+			"require": "./dist/index.cjs"
 		},
 		"./package.json": "./package.json"
 	},
@@ -52,10 +46,10 @@
 		"test": "npm run lint && npm run types && npm run unit && npm run build && npm run size"
 	},
 	"dependencies": {
-		"@prismicio/client": "^7.0.0-alpha.2",
 		"imgix-url-builder": "^0.0.3"
 	},
 	"devDependencies": {
+		"@prismicio/client": "^7.0.0-alpha.3",
 		"@prismicio/mock": "^0.2.0",
 		"@size-limit/preset-small-lib": "^8.2.4",
 		"@types/react-test-renderer": "^18.0.0",
@@ -70,7 +64,7 @@
 		"eslint-plugin-react-hooks": "^4.6.0",
 		"eslint-plugin-tsdoc": "^0.2.17",
 		"happy-dom": "^9.9.2",
-		"next": "^13.0.0",
+		"next": "^13.4.0",
 		"prettier": "^2.8.8",
 		"prettier-plugin-jsdoc": "^0.4.2",
 		"react": "^18.1.0",

package/src/PrismicNextLink.tsx

@@ -2,7 +2,7 @@
 
 import * as React from "react";
 import * as prismic from "@prismicio/client";
-import Link, { LinkProps } from "next/link";
+import Link from "next/link";
 
 export type PrismicNextLinkProps = Omit<
 	React.ComponentProps<typeof Link>,
@@ -12,19 +12,19 @@ export type PrismicNextLinkProps = Omit<
 	rel?: string | prismic.AsLinkAttrsConfig["rel"];
 } & (
 		| {
-				document: prismic.PrismicDocument | null | undefined;
+				field: prismic.LinkField | null | undefined;
+				document?: never;
 				href?: never;
-				field?: never;
 		  }
 		| {
-				field: prismic.LinkField | null | undefined;
+				field?: never;
+				document: prismic.PrismicDocument | null | undefined;
 				href?: never;
-				document?: never;
 		  }
 		| {
-				href: LinkProps["href"];
-				field?: prismic.LinkField | null | undefined;
+				field?: never;
 				document?: never;
+				href: React.ComponentProps<typeof Link>["href"];
 		  }
 	);
 
@@ -44,12 +44,12 @@ export const PrismicNextLink = React.forwardRef<
 		rel: typeof restProps.rel === "function" ? restProps.rel : undefined,
 	});
 
-	let rel: string | undefined = computedRel;
+	const href = ("href" in restProps ? restProps.href : computedHref) || "";
+
+	let rel = computedRel;
 	if ("rel" in restProps && typeof restProps.rel !== "function") {
 		rel = restProps.rel;
 	}
 
-	const href = ("href" in restProps ? restProps.href : computedHref) || "";
-
 	return <Link ref={ref} {...attrs} {...restProps} href={href} rel={rel} />;
 });

package/src/PrismicPreview.tsx

@@ -1,11 +1,8 @@
-"use client";
-
 import * as React from "react";
-import { useRouter } from "next/router";
+import * as prismic from "@prismicio/client";
 import Script from "next/script";
 
-import { getPrismicPreviewCookie } from "./lib/getPrismicPreviewCookie";
-import { getPreviewCookieRepositoryName } from "./lib/getPreviewCookieRepositoryName";
+import { PrismicPreviewClient } from "./PrismicPreviewClient";
 
 /**
  * Props for `<PrismicPreview>`.
@@ -18,26 +15,23 @@ export type PrismicPreviewProps = {
 	repositoryName: string;
 
 	/**
+	 * **Only used in the Pages Directory (/pages).**
+	 *
 	 * The URL of your app's Prismic preview endpoint (default: `/api/preview`).
 	 * This URL will be fetched on preview update events.
-	 *
-	 * **Note**: If your `next.config.js` file contains a `basePath`, it is
-	 * automatically included.
 	 */
 	updatePreviewURL?: string;
 
 	/**
+	 * **Only used in the Pages Directory (/pages).**
+	 *
 	 * The URL of your app's exit preview endpoint (default: `/api/exit-preview`).
 	 * This URL will be fetched on preview exit events.
-	 *
-	 * **Note**: If your `next.config.js` file contains a `basePath`, it is
-	 * automatically included.
 	 */
 	exitPreviewURL?: string;
 
 	/**
-	 * Children to render adjacent to the Prismic Toolbar. The Prismic Toolbar
-	 * will be rendered last.
+	 * Children to render adjacent to the Prismic Toolbar.
 	 */
 	children?: React.ReactNode;
 };
@@ -45,8 +39,8 @@ export type PrismicPreviewProps = {
 /**
  * React component that sets up Prismic Previews using the Prismic Toolbar. When
  * the Prismic Toolbar send events to the browser, such as on preview updates
- * and exiting, this component will automatically update the Next.js preview
- * cookie and refresh the page.
+ * and exiting, this component will automatically refresh the page with the
+ * changes.
  *
  * This component can be wrapped around your app or added anywhere in your app's
  * tree. It must be rendered on every page.
@@ -54,127 +48,15 @@ export type PrismicPreviewProps = {
 export function PrismicPreview({
 	repositoryName,
 	children,
-	updatePreviewURL = "/api/preview",
-	exitPreviewURL = "/api/exit-preview",
+	...props
 }: PrismicPreviewProps): JSX.Element {
-	const router = useRouter();
-
-	const resolvedUpdatePreviewURL = router.basePath + updatePreviewURL;
-	const resolvedExitPreviewURL = router.basePath + exitPreviewURL;
-
-	React.useEffect(() => {
-		/**
-		 * Starts Preview Mode and refreshes the page's props.
-		 */
-		const startPreviewMode = async () => {
-			// Start Next.js Preview Mode via the given preview API endpoint.
-			const res = await globalThis.fetch(resolvedUpdatePreviewURL);
-
-			// We check for `res.redirected` rather than `res.ok`
-			// since the update preview endpoint may redirect to a
-			// 404 page. As long as it redirects, we know the
-			// endpoint exists and at least attempted to set
-			// preview data.
-			if (res.redirected) {
-				globalThis.location.reload();
-			} else {
-				console.error(
-					`[<PrismicPreview>] Failed to start or update Preview Mode using the "${resolvedUpdatePreviewURL}" API endpoint. Does it exist?`,
-				);
-			}
-		};
-
-		const handlePrismicPreviewUpdate = async (event: Event) => {
-			// Prevent the toolbar from reloading the page.
-			event.preventDefault();
-
-			await startPreviewMode();
-		};
-
-		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.
-			const res = await globalThis.fetch(resolvedExitPreviewURL);
-
-			if (res.ok) {
-				globalThis.location.reload();
-			} else {
-				console.error(
-					`[<PrismicPreview>] Failed to exit Preview Mode using the "${resolvedExitPreviewURL}" API endpoint. Does it exist?`,
-				);
-			}
-		};
-
-		if (router.isPreview) {
-			// Register Prismic Toolbar event handlers.
-			window.addEventListener(
-				"prismicPreviewUpdate",
-				handlePrismicPreviewUpdate,
-			);
-			window.addEventListener("prismicPreviewEnd", handlePrismicPreviewEnd);
-		} else {
-			const prismicPreviewCookie = getPrismicPreviewCookie(
-				globalThis.document.cookie,
-			);
-
-			if (prismicPreviewCookie) {
-				// If a Prismic preview cookie is present, but Next.js Preview
-				// Mode is not active, we must activate Preview Mode manually.
-				//
-				// This will happen when a visitor accesses the page using a
-				// Prismic preview share link.
-
-				/**
-				 * Determines if the current location is a descendant of the app's base
-				 * path.
-				 *
-				 * This is used to prevent infinite refrehes; when
-				 * `isDescendantOfBasePath` is `false`, `router.isPreview` is also
-				 * `false`.
-				 *
-				 * If the app does not have a base path, this should always be `true`.
-				 */
-				const locationIsDescendantOfBasePath = window.location.href.startsWith(
-					window.location.origin + router.basePath,
-				);
-
-				const prismicPreviewCookieRepositoryName =
-					getPreviewCookieRepositoryName(prismicPreviewCookie);
-
-				if (
-					locationIsDescendantOfBasePath &&
-					prismicPreviewCookieRepositoryName === repositoryName
-				) {
-					startPreviewMode();
-				}
-			}
-		}
-
-		// On cleanup, unregister Prismic Toolbar event handlers.
-		return () => {
-			window.removeEventListener(
-				"prismicPreviewUpdate",
-				handlePrismicPreviewUpdate,
-			);
-			window.removeEventListener("prismicPreviewEnd", handlePrismicPreviewEnd);
-		};
-	}, [
-		repositoryName,
-		resolvedExitPreviewURL,
-		resolvedUpdatePreviewURL,
-		router.isPreview,
-		router.basePath,
-	]);
+	const toolbarSrc = prismic.getToolbarSrc(repositoryName);
 
 	return (
 		<>
 			{children}
-			<Script
-				src={`https://static.cdn.prismic.io/prismic.js?repo=${repositoryName}&new=true`}
-				strategy="lazyOnload"
-			/>
+			<PrismicPreviewClient repositoryName={repositoryName} {...props} />
+			<Script src={toolbarSrc} strategy="lazyOnload" />
 		</>
 	);
 }

package/src/PrismicPreviewClient.tsx

@@ -0,0 +1,159 @@
+"use client";
+
+import { useEffect } from "react";
+import { useRouter as usePagesRouter } from "next/router";
+import { useRouter } from "next/navigation";
+
+import { getPrismicPreviewCookie } from "./lib/getPrismicPreviewCookie";
+import { getPreviewCookieRepositoryName } from "./lib/getPreviewCookieRepositoryName";
+
+import { PrismicPreviewProps } from "./PrismicPreview";
+
+type PrismicPreviewClientProps = Omit<PrismicPreviewProps, "children">;
+
+export function PrismicPreviewClient({
+	repositoryName,
+	updatePreviewURL = "/api/preview",
+	exitPreviewURL = "/api/exit-preview",
+}: PrismicPreviewClientProps): null {
+	let isAppRouter = true;
+	let isPreviewMode = false;
+	let basePath = "";
+	let refresh: () => void;
+
+	try {
+		// eslint-disable-next-line react-hooks/rules-of-hooks
+		const router = usePagesRouter();
+
+		isAppRouter = false;
+		basePath = router.basePath;
+		isPreviewMode = router.isPreview;
+		refresh = () => router.replace(router.asPath, undefined, { scroll: false });
+	} catch {
+		// Assume we are in App Router. Ignore the error.
+
+		// eslint-disable-next-line react-hooks/rules-of-hooks
+		const router = useRouter();
+
+		refresh = router.refresh;
+	}
+
+	useEffect(() => {
+		/**
+		 * Starts Preview Mode and refreshes the page's props.
+		 */
+		const startPreviewMode = async () => {
+			const resolvedUpdatePreviewURL = basePath + updatePreviewURL;
+
+			// Start Next.js Preview Mode via the given preview API endpoint.
+			const res = await globalThis.fetch(resolvedUpdatePreviewURL);
+
+			// We check for `res.redirected` rather than `res.ok`
+			// since the update preview endpoint may redirect to a
+			// 404 page. As long as it redirects, we know the
+			// endpoint exists and at least attempted to set
+			// preview data.
+			if (res.redirected) {
+				refresh();
+			} else {
+				console.error(
+					`[<PrismicPreview>] Failed to start or update Preview Mode using the "${resolvedUpdatePreviewURL}" API endpoint. Does it exist?`,
+				);
+			}
+		};
+
+		const handlePrismicPreviewUpdate = async (event: Event) => {
+			// Prevent the toolbar from reloading the page.
+			event.preventDefault();
+
+			if (isAppRouter) {
+				refresh();
+			} else {
+				await startPreviewMode();
+			}
+		};
+
+		const handlePrismicPreviewEnd = async (event: Event) => {
+			// Prevent the toolbar from reloading the page.
+			event.preventDefault();
+
+			if (isAppRouter) {
+				refresh();
+			} else {
+				const resolvedExitPreviewURL = basePath + exitPreviewURL;
+
+				// Exit Next.js Preview Mode via the given preview API endpoint.
+				const res = await globalThis.fetch(resolvedExitPreviewURL);
+
+				if (res.ok) {
+					// TODO: Can we do better than a full page reload?
+					// globalThis.location.reload();
+					refresh();
+				} else {
+					console.error(
+						`[<PrismicPreview>] Failed to exit Preview Mode using the "${resolvedExitPreviewURL}" API endpoint. Does it exist?`,
+					);
+				}
+			}
+		};
+
+		window.addEventListener("prismicPreviewUpdate", handlePrismicPreviewUpdate);
+		window.addEventListener("prismicPreviewEnd", handlePrismicPreviewEnd);
+
+		if (!isPreviewMode) {
+			const prismicPreviewCookie = getPrismicPreviewCookie(
+				globalThis.document.cookie,
+			);
+
+			if (prismicPreviewCookie) {
+				// If a Prismic preview cookie is present, but Next.js Preview
+				// Mode is not active, we must activate Preview Mode manually.
+				//
+				// This will happen when a visitor accesses the page using a
+				// Prismic preview share link.
+
+				/**
+				 * Determines if the current location is a descendant of the app's base
+				 * path.
+				 *
+				 * This is used to prevent infinite refrehes; when
+				 * `isDescendantOfBasePath` is `false`, `router.isPreview` is also
+				 * `false`.
+				 *
+				 * If the app does not have a base path, this should always be `true`.
+				 */
+				const locationIsDescendantOfBasePath = window.location.href.startsWith(
+					window.location.origin + basePath,
+				);
+
+				const prismicPreviewCookieRepositoryName =
+					getPreviewCookieRepositoryName(prismicPreviewCookie);
+
+				if (
+					locationIsDescendantOfBasePath &&
+					prismicPreviewCookieRepositoryName === repositoryName
+				) {
+					startPreviewMode();
+				}
+			}
+		}
+
+		return () => {
+			window.removeEventListener(
+				"prismicPreviewUpdate",
+				handlePrismicPreviewUpdate,
+			);
+			window.removeEventListener("prismicPreviewEnd", handlePrismicPreviewEnd);
+		};
+	}, [
+		basePath,
+		exitPreviewURL,
+		isAppRouter,
+		isPreviewMode,
+		refresh,
+		repositoryName,
+		updatePreviewURL,
+	]);
+
+	return null;
+}