@prismicio/next 0.1.2 → 0.2.0-alpha.0

package/dist/index.cjs

@@ -7,8 +7,6 @@ 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);
@@ -28,7 +26,7 @@ function _interopNamespace(e) {
 }
 
 const prismic__namespace = /*#__PURE__*/_interopNamespace(prismic);
-const React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+const React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 function setPreviewData({ req, res }) {
   const ref = req.query.token || req.cookies[prismic__namespace.cookie.preview];
@@ -38,34 +36,24 @@ function setPreviewData({ req, res }) {
 }
 
 function exitPreview(config) {
-  const { req } = config;
   config.res.clearPreviewData();
-  if (req.headers.referer) {
-    const url = new URL(req.headers.referer);
-    if (url.pathname !== "/api/exit-preview") {
-      config.res.redirect(req.headers.referer);
-      return;
-    }
-  }
-  config.res.redirect("/");
+  config.res.json({ success: true });
 }
 
 const readValue = (value) => {
   return value.replace(/%3B/g, ";");
 };
-const parse = (cookieString) => {
-  const result = {};
-  const cookies = cookieString.split("; ");
+const getCookie = (name) => {
+  const cookies = document.cookie.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);
+    const thisName = readValue(parts[0]).replace(/%3D/g, "=");
+    if (thisName === name) {
+      return 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) => {
@@ -94,51 +82,64 @@ const extractPreviewRefRepositoryName = (previewRef) => {
   return extractRepositoryNameFromObjectRef(previewRef) || extractRepositoryNameFromURLRef(previewRef);
 };
 
-const isPrismicUpdateToolbarEvent = (event) => {
-  return "detail" in event && typeof event.detail.ref === "string";
+const updatePreviewMode = async (updatePreviewURL) => {
+  const res = await globalThis.fetch(updatePreviewURL);
+  if (res.ok) {
+    window.location.reload();
+  } else {
+    console.error(`[<PrismicPreview>] Failed to start or update Preview Mode using the "${updatePreviewURL}" API endpoint. Does it exist?`);
+  }
+};
+const exitPreviewMode = async (exitPreviewURL) => {
+  const res = await globalThis.fetch(exitPreviewURL);
+  if (res.ok) {
+    window.location.reload();
+  } else {
+    console.error(`[<PrismicPreview>] Failed to exit Preview Mode using the "${exitPreviewURL}" API endpoint. Does it exist?`);
+  }
 };
 function PrismicPreview({
   repositoryName,
-  children,
   updatePreviewURL = "/api/preview",
-  exitPreviewURL = "/api/exit-preview"
+  exitPreviewURL = "/api/exit-preview",
+  children
 }) {
   const router$1 = router.useRouter();
-  React.useEffect(() => {
-    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 resolvedUpdatePreviewURL = router$1.basePath + updatePreviewURL;
+  const resolvedExitPreviewURL = router$1.basePath + exitPreviewURL;
+  React__namespace.useEffect(() => {
+    const previewCookie = getCookie(prismic__namespace.cookie.preview);
+    const prismicPreviewSessionIsForThisRepo = Boolean(previewCookie && extractPreviewRefRepositoryName(previewCookie) === repositoryName);
+    const locationIsDescendantOfBasePath = window.location.href.startsWith(window.location.origin + router$1.basePath);
+    const loadedFromShareLink = !router$1.isPreview && previewCookie;
+    if (prismicPreviewSessionIsForThisRepo && locationIsDescendantOfBasePath && loadedFromShareLink) {
+      updatePreviewMode(resolvedUpdatePreviewURL);
+      return;
+    }
     const handlePrismicPreviewUpdate = async (event) => {
-      if (isPrismicUpdateToolbarEvent(event)) {
-        event.preventDefault();
-        await fetch(updatePreviewURL);
-        window.location.reload();
-      }
+      event.preventDefault();
+      await updatePreviewMode(resolvedUpdatePreviewURL);
     };
     const handlePrismicPreviewEnd = async (event) => {
       event.preventDefault();
-      await fetch(exitPreviewURL);
-      window.location.reload();
+      await exitPreviewMode(resolvedExitPreviewURL);
     };
-    if (window) {
-      window.addEventListener("prismicPreviewUpdate", handlePrismicPreviewUpdate);
-      window.addEventListener("prismicPreviewEnd", handlePrismicPreviewEnd);
-    }
+    window.addEventListener("prismicPreviewUpdate", handlePrismicPreviewUpdate);
+    window.addEventListener("prismicPreviewEnd", handlePrismicPreviewEnd);
     return () => {
-      if (window) {
-        window.removeEventListener("prismicPreviewUpdate", handlePrismicPreviewUpdate);
-        window.removeEventListener("prismicPreviewEnd", handlePrismicPreviewEnd);
-      }
+      window.removeEventListener("prismicPreviewUpdate", handlePrismicPreviewUpdate);
+      window.removeEventListener("prismicPreviewEnd", handlePrismicPreviewEnd);
     };
-  }, []);
-  return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(react.PrismicToolbar, {
+  }, [
+    repositoryName,
+    resolvedUpdatePreviewURL,
+    resolvedExitPreviewURL,
+    router$1.isPreview,
+    router$1.basePath
+  ]);
+  return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, children, /* @__PURE__ */ React__namespace.createElement(react.PrismicToolbar, {
     repositoryName
-  }), children);
+  }));
 }
 
 const isPrismicNextPreviewData = (previewData) => {
@@ -155,26 +156,23 @@ const enableAutoPreviews = (config) => {
   }
 };
 
-const isPrismicNextQuery = (query) => typeof query.documentId === "string" && typeof query.token === "string";
-async function redirectToPreviewURL({
-  req,
-  res,
-  client,
-  linkResolver,
-  defaultURL = "/"
-}) {
-  if (isPrismicNextQuery(req.query)) {
-    const { documentId, token } = req.query;
-    const previewUrl = await client.resolvePreviewURL({
-      linkResolver,
+const isPrismicNextQuery = (query) => {
+  return typeof query.documentId === "string" && typeof query.token === "string";
+};
+async function redirectToPreviewURL(config) {
+  const defaultURL = config.defaultURL || "/";
+  const basePath = config.basePath || "";
+  if (isPrismicNextQuery(config.req.query)) {
+    const previewUrl = await config.client.resolvePreviewURL({
+      linkResolver: config.linkResolver,
       defaultURL,
-      documentID: documentId,
-      previewToken: token
+      documentID: config.req.query.documentId,
+      previewToken: config.req.query.token
     });
-    res.redirect(previewUrl);
+    config.res.redirect(basePath + previewUrl);
     return;
   }
-  res.redirect(defaultURL);
+  config.res.redirect(basePath + defaultURL);
 }
 
 exports.PrismicPreview = PrismicPreview;

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { NextApiRequest, NextApiResponse, PreviewData } from 'next';
+import * as React from 'react';
 import { Client, HttpRequestLike } from '@prismicio/client';
-import React from 'react';
 import { LinkResolverFunction } from '@prismicio/helpers';
 
 /**
@@ -13,61 +13,20 @@ declare type SetPreviewDataConfig = {
      *
      * @see Next.js API route docs: {@link https://nextjs.org/docs/api-routes/introduction}
      */
-    req: {
-        query: NextApiRequest["query"];
-        cookies: NextApiRequest["cookies"];
-    };
+    req: Pick<NextApiRequest, "query" | "cookies">;
     /**
      * 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: {
-        setPreviewData: NextApiResponse["setPreviewData"];
-    };
+    res: Pick<NextApiResponse, "setPreviewData">;
 };
 /**
  * Set Prismic preview data for Next.js's Preview Mode.
  */
 declare function setPreviewData({ req, res }: SetPreviewDataConfig): void;
 
-/**
- * Configuration for `enableAutoPreviews`.
- *
- * @typeParam TPreviewData - Next.js preview data object.
- */
-declare type EnableAutoPreviewsConfig<TPreviewData extends PreviewData = PreviewData> = {
-    /**
-     * Prismic client with which automatic previews will be enabled.
-     */
-    client: Client;
-} & ({
-    /**
-     * A Next.js context object (such as the context object from
-     * `getStaticProps` or `getServerSideProps`).
-     *
-     * Pass a `context` object when using `enableAutoPreviews` outside a
-     * Next.js API endpoint.
-     */
-    previewData?: TPreviewData;
-} | {
-    /**
-     * A Next.js API endpoint request object.
-     *
-     * Pass a `req` object when using `enableAutoPreviews` in a Next.js API endpoint.
-     */
-    req?: HttpRequestLike;
-});
-/**
- * Configures a Prismic client to automatically query draft content during a
- * preview session. It either takes in a Next.js `getStaticProps` context object
- * or a Next.js API endpoint request object.
- *
- * @param config - Configuration for the function.
- */
-declare const enableAutoPreviews: <TPreviewData extends PreviewData>(config: EnableAutoPreviewsConfig<TPreviewData>) => void;
-
 /**
  * Configuration for `exitPreview`.
  */
@@ -78,27 +37,17 @@ declare type ExitPreviewConfig = {
      *
      * @see Next.js API route docs: {@link https://nextjs.org/docs/api-routes/introduction}
      */
-    req: {
-        headers: {
-            referer?: NextApiRequest["headers"]["referer"];
-        };
-    };
+    req: Pick<NextApiRequest, "headers">;
     /**
      * 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: {
-        clearPreviewData: NextApiResponse["clearPreviewData"];
-        redirect: NextApiResponse["redirect"];
-    };
+    res: Pick<NextApiResponse, "clearPreviewData" | "json">;
 };
 /**
  * Exits Next.js's Preview Mode from within a Next.js API route.
- *
- * If the user was sent to the endpoint from a page, the user will be redirected
- * back to that page after exiting Preview Mode.
  */
 declare function exitPreview(config: ExitPreviewConfig): void;
 
@@ -114,13 +63,23 @@ declare type PrismicPreviewProps = {
     /**
      * 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;
     /**
      * 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?: React.ReactNode;
 };
 /**
@@ -132,55 +91,62 @@ declare type PrismicPreviewProps = {
  * This component can be wrapped around your app or added anywhere in your app's
  * tree. It must be rendered on every page.
  */
-declare function PrismicPreview({ repositoryName, children, updatePreviewURL, exitPreviewURL, }: PrismicPreviewProps): JSX.Element;
-
-/**
- * Redirects a user to the URL of a previewed Prismic document from within a
- * Next.js API route.
- */
-declare function redirectToPreviewURL<TLinkResolverFunction extends LinkResolverFunction<any>>({ req, res, client, linkResolver, defaultURL, }: PreviewConfig<TLinkResolverFunction>): Promise<void>;
+declare function PrismicPreview({ repositoryName, updatePreviewURL, exitPreviewURL, children, }: PrismicPreviewProps): JSX.Element;
 
 /**
- * Configuration for creating a Prismic client with automatic preview support in
- * Next.js apps.
+ * Configuration for `enableAutoPreviews`.
+ *
+ * @typeParam TPreviewData - Next.js preview data object.
  */
-declare type CreateClientConfig = {
+declare type EnableAutoPreviewsConfig<TPreviewData extends PreviewData = PreviewData> = {
     /**
-     * Preview data coming from Next.js context object. This context object comes
-     * from `getStaticProps` or `getServerSideProps`.
+     * Prismic client with which automatic previews will be enabled.
+     */
+    client: Client;
+} & ({
+    /**
+     * A Next.js context object (such as the context object from
+     * `getStaticProps` or `getServerSideProps`).
      *
-     * Pass `previewData` when using outside a Next.js API endpoint.
+     * Pass a `context` object when using `enableAutoPreviews` outside a
+     * Next.js API endpoint.
      */
-    previewData?: PreviewData;
+    previewData?: TPreviewData;
+} | {
     /**
      * A Next.js API endpoint request object.
      *
-     * Pass a `req` object when using in a Next.js API endpoint.
+     * Pass a `req` object when using `enableAutoPreviews` in a Next.js API endpoint.
      */
-    req?: NextApiRequest;
-};
+    req?: HttpRequestLike;
+});
+/**
+ * Configures a Prismic client to automatically query draft content during a
+ * preview session. It either takes in a Next.js `getStaticProps` context object
+ * or a Next.js API endpoint request object.
+ *
+ * @param config - Configuration for the function.
+ */
+declare const enableAutoPreviews: <TPreviewData extends PreviewData>(config: EnableAutoPreviewsConfig<TPreviewData>) => void;
+
 /**
  * Preview config for enabling previews with redirectToPreviewURL
  */
-declare type PreviewConfig<TLinkResolverFunction extends LinkResolverFunction<any> = LinkResolverFunction> = {
+declare type RedirectToPreviewURLConfig<TLinkResolverFunction extends LinkResolverFunction<any> = LinkResolverFunction> = {
     /**
      * 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"];
-    };
+    req: Pick<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"];
-    };
+    res: Pick<NextApiResponse, "redirect">;
     /**
      * The Prismic client configured for the preview session's repository.
      */
@@ -193,8 +159,46 @@ declare type PreviewConfig<TLinkResolverFunction extends LinkResolverFunction<an
     linkResolver?: TLinkResolverFunction;
     /**
      * The default redirect URL if a URL cannot be determined for the previewed document.
+     *
+     * **Note**: If your `next.config.js` file contains a `basePath`, you must
+     * include the `basePath` as part of this option. `redirectToPreviewURL()`
+     * cannot read your global `basePath`.
      */
     defaultURL?: string;
+    /**
+     * The `basePath` for the Next.js app as it is defined in `next.config.js`.
+     * This option can be omitted if the app does not have a `basePath`.
+     *
+     * @remarks
+     * The API route is unable to detect the app's `basePath` automatically. It
+     * must be provided to `redirectToPreviewURL()` manually.
+     */
+    basePath?: string;
+};
+/**
+ * Redirects a user to the URL of a previewed Prismic document from within a
+ * Next.js API route.
+ */
+declare function redirectToPreviewURL<TLinkResolverFunction extends LinkResolverFunction<any>>(config: RedirectToPreviewURLConfig<TLinkResolverFunction>): Promise<void>;
+
+/**
+ * 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;
 };
 
-export { CreateClientConfig, EnableAutoPreviewsConfig, ExitPreviewConfig as ExitPreviewParams, PreviewConfig, PrismicPreview, PrismicPreviewProps, SetPreviewDataConfig, enableAutoPreviews, exitPreview, redirectToPreviewURL, setPreviewData };
+export { CreateClientConfig, EnableAutoPreviewsConfig, ExitPreviewConfig, PrismicPreview, PrismicPreviewProps, RedirectToPreviewURLConfig, SetPreviewDataConfig, enableAutoPreviews, exitPreview, redirectToPreviewURL, setPreviewData };

package/dist/index.js

@@ -1,5 +1,5 @@
 import * as prismic from '@prismicio/client';
-import React, { useEffect } from 'react';
+import * as React from 'react';
 import { PrismicToolbar } from '@prismicio/react';
 import { useRouter } from 'next/router';
 
@@ -11,34 +11,24 @@ function setPreviewData({ req, res }) {
 }
 
 function exitPreview(config) {
-  const { req } = config;
   config.res.clearPreviewData();
-  if (req.headers.referer) {
-    const url = new URL(req.headers.referer);
-    if (url.pathname !== "/api/exit-preview") {
-      config.res.redirect(req.headers.referer);
-      return;
-    }
-  }
-  config.res.redirect("/");
+  config.res.json({ success: true });
 }
 
 const readValue = (value) => {
   return value.replace(/%3B/g, ";");
 };
-const parse = (cookieString) => {
-  const result = {};
-  const cookies = cookieString.split("; ");
+const getCookie = (name) => {
+  const cookies = document.cookie.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);
+    const thisName = readValue(parts[0]).replace(/%3D/g, "=");
+    if (thisName === name) {
+      return 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) => {
@@ -67,51 +57,64 @@ const extractPreviewRefRepositoryName = (previewRef) => {
   return extractRepositoryNameFromObjectRef(previewRef) || extractRepositoryNameFromURLRef(previewRef);
 };
 
-const isPrismicUpdateToolbarEvent = (event) => {
-  return "detail" in event && typeof event.detail.ref === "string";
+const updatePreviewMode = async (updatePreviewURL) => {
+  const res = await globalThis.fetch(updatePreviewURL);
+  if (res.ok) {
+    window.location.reload();
+  } else {
+    console.error(`[<PrismicPreview>] Failed to start or update Preview Mode using the "${updatePreviewURL}" API endpoint. Does it exist?`);
+  }
+};
+const exitPreviewMode = async (exitPreviewURL) => {
+  const res = await globalThis.fetch(exitPreviewURL);
+  if (res.ok) {
+    window.location.reload();
+  } else {
+    console.error(`[<PrismicPreview>] Failed to exit Preview Mode using the "${exitPreviewURL}" API endpoint. Does it exist?`);
+  }
 };
 function PrismicPreview({
   repositoryName,
-  children,
   updatePreviewURL = "/api/preview",
-  exitPreviewURL = "/api/exit-preview"
+  exitPreviewURL = "/api/exit-preview",
+  children
 }) {
   const router = useRouter();
-  useEffect(() => {
-    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 resolvedUpdatePreviewURL = router.basePath + updatePreviewURL;
+  const resolvedExitPreviewURL = router.basePath + exitPreviewURL;
+  React.useEffect(() => {
+    const previewCookie = getCookie(prismic.cookie.preview);
+    const prismicPreviewSessionIsForThisRepo = Boolean(previewCookie && extractPreviewRefRepositoryName(previewCookie) === repositoryName);
+    const locationIsDescendantOfBasePath = window.location.href.startsWith(window.location.origin + router.basePath);
+    const loadedFromShareLink = !router.isPreview && previewCookie;
+    if (prismicPreviewSessionIsForThisRepo && locationIsDescendantOfBasePath && loadedFromShareLink) {
+      updatePreviewMode(resolvedUpdatePreviewURL);
+      return;
+    }
     const handlePrismicPreviewUpdate = async (event) => {
-      if (isPrismicUpdateToolbarEvent(event)) {
-        event.preventDefault();
-        await fetch(updatePreviewURL);
-        window.location.reload();
-      }
+      event.preventDefault();
+      await updatePreviewMode(resolvedUpdatePreviewURL);
     };
     const handlePrismicPreviewEnd = async (event) => {
       event.preventDefault();
-      await fetch(exitPreviewURL);
-      window.location.reload();
+      await exitPreviewMode(resolvedExitPreviewURL);
     };
-    if (window) {
-      window.addEventListener("prismicPreviewUpdate", handlePrismicPreviewUpdate);
-      window.addEventListener("prismicPreviewEnd", handlePrismicPreviewEnd);
-    }
+    window.addEventListener("prismicPreviewUpdate", handlePrismicPreviewUpdate);
+    window.addEventListener("prismicPreviewEnd", handlePrismicPreviewEnd);
     return () => {
-      if (window) {
-        window.removeEventListener("prismicPreviewUpdate", handlePrismicPreviewUpdate);
-        window.removeEventListener("prismicPreviewEnd", handlePrismicPreviewEnd);
-      }
+      window.removeEventListener("prismicPreviewUpdate", handlePrismicPreviewUpdate);
+      window.removeEventListener("prismicPreviewEnd", handlePrismicPreviewEnd);
     };
-  }, []);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(PrismicToolbar, {
+  }, [
+    repositoryName,
+    resolvedUpdatePreviewURL,
+    resolvedExitPreviewURL,
+    router.isPreview,
+    router.basePath
+  ]);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, children, /* @__PURE__ */ React.createElement(PrismicToolbar, {
     repositoryName
-  }), children);
+  }));
 }
 
 const isPrismicNextPreviewData = (previewData) => {
@@ -128,26 +131,23 @@ const enableAutoPreviews = (config) => {
   }
 };
 
-const isPrismicNextQuery = (query) => typeof query.documentId === "string" && typeof query.token === "string";
-async function redirectToPreviewURL({
-  req,
-  res,
-  client,
-  linkResolver,
-  defaultURL = "/"
-}) {
-  if (isPrismicNextQuery(req.query)) {
-    const { documentId, token } = req.query;
-    const previewUrl = await client.resolvePreviewURL({
-      linkResolver,
+const isPrismicNextQuery = (query) => {
+  return typeof query.documentId === "string" && typeof query.token === "string";
+};
+async function redirectToPreviewURL(config) {
+  const defaultURL = config.defaultURL || "/";
+  const basePath = config.basePath || "";
+  if (isPrismicNextQuery(config.req.query)) {
+    const previewUrl = await config.client.resolvePreviewURL({
+      linkResolver: config.linkResolver,
       defaultURL,
-      documentID: documentId,
-      previewToken: token
+      documentID: config.req.query.documentId,
+      previewToken: config.req.query.token
     });
-    res.redirect(previewUrl);
+    config.res.redirect(basePath + previewUrl);
     return;
   }
-  res.redirect(defaultURL);
+  config.res.redirect(basePath + defaultURL);
 }
 
 export { PrismicPreview, enableAutoPreviews, exitPreview, redirectToPreviewURL, setPreviewData };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@prismicio/next",
-	"version": "0.1.2",
+	"version": "0.2.0-alpha.0",
 	"description": "Helpers to integrate Prismic into Next.js apps",
 	"keywords": [
 		"typescript",
@@ -41,44 +41,38 @@
 		"release:dry": "standard-version --dry-run",
 		"size": "size-limit",
 		"test": "npm run lint && npm run unit && npm run build && npm run size",
-		"unit": "nyc --reporter=lcovonly --reporter=text --exclude-after-remap=false ava"
+		"unit": "vitest run --coverage",
+		"unit:watch": "vitest watch"
 	},
 	"dependencies": {
-		"@prismicio/react": "^2.2.0"
+		"@prismicio/client": "^6.0.0",
+		"@prismicio/react": "^2.2.0",
+		"@prismicio/types": "^0.1.27"
 	},
 	"devDependencies": {
-		"@prismicio/client": "^6.4.2",
-		"@prismicio/mock": "^0.0.9",
-		"@prismicio/types": "^0.1.27",
 		"@size-limit/preset-small-lib": "^7.0.8",
-		"@testing-library/react": "^13.0.0",
-		"@types/jsdom": "^16.2.14",
-		"@types/jsdom-global": "^3.0.2",
 		"@types/react-test-renderer": "^17.0.1",
-		"@types/sinon": "^10.0.11",
 		"@typescript-eslint/eslint-plugin": "^5.17.0",
 		"@typescript-eslint/parser": "^5.17.0",
-		"ava": "^4.1.0",
+		"c8": "^7.11.0",
 		"eslint": "^8.12.0",
 		"eslint-config-prettier": "^8.5.0",
 		"eslint-plugin-prettier": "^4.0.0",
+		"eslint-plugin-react": "^7.29.4",
+		"eslint-plugin-react-hooks": "^4.4.0",
 		"eslint-plugin-tsdoc": "^0.2.14",
-		"jsdom": "^19.0.0",
-		"jsdom-global": "^3.0.2",
-		"msw": "^0.39.2",
+		"happy-dom": "^2.55.0",
 		"next": "^12.1.4",
-		"node-fetch": "^3.2.3",
 		"nyc": "^15.1.0",
 		"prettier": "^2.6.1",
 		"prettier-plugin-jsdoc": "^0.3.35",
 		"react": "^18.0.0",
-		"react-dom": "^18.0.0",
-		"sinon": "^13.0.1",
+		"react-test-renderer": "^18.0.0",
 		"siroc": "^0.16.0",
 		"size-limit": "^7.0.8",
 		"standard-version": "^9.3.2",
-		"ts-eager": "^2.0.2",
-		"typescript": "^4.6.3"
+		"typescript": "^4.6.3",
+		"vitest": "^0.8.1"
 	},
 	"peerDependencies": {
 		"@prismicio/client": "^6.0.0",

package/src/PrismicPreview.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect } from "react";
+import * as React from "react";
+import * as prismic from "@prismicio/client";
 import { PrismicToolbar } from "@prismicio/react";
 import { useRouter } from "next/router";
 
@@ -18,31 +19,65 @@ export type PrismicPreviewProps = {
 	/**
 	 * 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;
 
 	/**
 	 * 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?: React.ReactNode;
 };
 
 /**
- * Determines if an Event object came from the Prismic Toolbar.
+ * Updates (or starts) Next.js Preview Mode using a given API endpoint and
+ * reloads the page.
  *
- * @param event - Event to check.
+ * @param updatePreviewURL - The API endpoint that sets Preview Mode data.
+ */
+const updatePreviewMode = async (updatePreviewURL: string): Promise<void> => {
+	// Start Next.js Preview Mode via the given preview API endpoint.
+	const res = await globalThis.fetch(updatePreviewURL);
+
+	if (res.ok) {
+		// Reload the page with an active Preview Mode.
+		window.location.reload();
+	} else {
+		console.error(
+			`[<PrismicPreview>] Failed to start or update Preview Mode using the "${updatePreviewURL}" API endpoint. Does it exist?`,
+		);
+	}
+};
+
+/**
+ * Exits Next.js Preview Mode using a given API endpoint and reloads the page.
  *
- * @returns `true` if `event` came from the Prismic Toolbar, `false` otherwise.
+ * @param exitPreviewURL - The API endpoint that exits Preview Mode.
  */
-const isPrismicUpdateToolbarEvent = (
-	event: Event,
-): event is CustomEvent<{ ref: string }> => {
-	return (
-		"detail" in event && typeof (event as CustomEvent).detail.ref === "string"
-	);
+const exitPreviewMode = async (exitPreviewURL: string): Promise<void> => {
+	// Exit Next.js Preview Mode via the given exit preview API endpoint.
+	const res = await globalThis.fetch(exitPreviewURL);
+
+	if (res.ok) {
+		// Reload the page with an inactive Preview Mode.
+		window.location.reload();
+	} else {
+		console.error(
+			`[<PrismicPreview>] Failed to exit Preview Mode using the "${exitPreviewURL}" API endpoint. Does it exist?`,
+		);
+	}
 };
 
 /**
@@ -56,78 +91,96 @@ const isPrismicUpdateToolbarEvent = (
  */
 export function PrismicPreview({
 	repositoryName,
-	children,
 	updatePreviewURL = "/api/preview",
 	exitPreviewURL = "/api/exit-preview",
+	children,
 }: PrismicPreviewProps): JSX.Element {
 	const router = useRouter();
 
-	useEffect(() => {
-		const previewRefRepositoryName = extractPreviewRefRepositoryName(
-			getCookie("io.prismic.preview", globalThis.document.cookie) as string,
+	const resolvedUpdatePreviewURL = router.basePath + updatePreviewURL;
+	const resolvedExitPreviewURL = router.basePath + exitPreviewURL;
+
+	React.useEffect(() => {
+		/**
+		 * The Prismic preview cookie.
+		 */
+		const previewCookie = getCookie(prismic.cookie.preview);
+
+		/**
+		 * Determines if the current Prismic preview session is for the repository
+		 * configured for this instance of `<PrismicPreview>`.
+		 */
+		const prismicPreviewSessionIsForThisRepo = Boolean(
+			previewCookie &&
+				extractPreviewRefRepositoryName(previewCookie) === repositoryName,
 		);
 
-		const startPreviewIfLoadedFromSharedLink = async () => {
-			if (previewRefRepositoryName === repositoryName && !router.isPreview) {
-				await fetch(updatePreviewURL);
-				window.location.reload();
-			}
-		};
+		/**
+		 * 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,
+		);
 
-		startPreviewIfLoadedFromSharedLink();
+		/**
+		 * Determines if the current user loaded the page from a share link.
+		 *
+		 * Currently, we can only deduce this by checking if router.isPreview is
+		 * false (i.e. Preview Mode is inactive) and a Prismic preview cookie is present.
+		 */
+		const loadedFromShareLink = !router.isPreview && previewCookie;
+
+		if (
+			prismicPreviewSessionIsForThisRepo &&
+			locationIsDescendantOfBasePath &&
+			loadedFromShareLink
+		) {
+			updatePreviewMode(resolvedUpdatePreviewURL);
+
+			return;
+		}
 
 		const handlePrismicPreviewUpdate = async (event: Event) => {
-			if (isPrismicUpdateToolbarEvent(event)) {
-				// Prevent the toolbar from reloading the page.
-				event.preventDefault();
-
-				// 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();
-			}
+			// Prevent the toolbar from reloading the page.
+			event.preventDefault();
+			await updatePreviewMode(resolvedUpdatePreviewURL);
 		};
 
 		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();
+			await exitPreviewMode(resolvedExitPreviewURL);
 		};
 
 		// Register Prismic Toolbar event handlers.
-		if (window) {
-			window.addEventListener(
-				"prismicPreviewUpdate",
-				handlePrismicPreviewUpdate,
-			);
-			window.addEventListener("prismicPreviewEnd", handlePrismicPreviewEnd);
-		}
+		window.addEventListener("prismicPreviewUpdate", handlePrismicPreviewUpdate);
+		window.addEventListener("prismicPreviewEnd", handlePrismicPreviewEnd);
 
 		// On cleanup, unregister Prismic Toolbar event handlers.
 		return () => {
-			if (window) {
-				window.removeEventListener(
-					"prismicPreviewUpdate",
-					handlePrismicPreviewUpdate,
-				);
-				window.removeEventListener(
-					"prismicPreviewEnd",
-					handlePrismicPreviewEnd,
-				);
-			}
+			window.removeEventListener(
+				"prismicPreviewUpdate",
+				handlePrismicPreviewUpdate,
+			);
+			window.removeEventListener("prismicPreviewEnd", handlePrismicPreviewEnd);
 		};
-	}, []);
+	}, [
+		repositoryName,
+		resolvedUpdatePreviewURL,
+		resolvedExitPreviewURL,
+		router.isPreview,
+		router.basePath,
+	]);
 
 	return (
 		<>
-			<PrismicToolbar repositoryName={repositoryName} />
 			{children}
+			<PrismicToolbar repositoryName={repositoryName} />
 		</>
 	);
 }

package/src/enableAutoPreviews.ts

@@ -60,19 +60,17 @@ export type EnableAutoPreviewsConfig<
 export const enableAutoPreviews = <TPreviewData extends PreviewData>(
 	config: EnableAutoPreviewsConfig<TPreviewData>,
 ): void => {
-	/**
-	 * If preview data is being passed from Next Context then use queryContentFromRef
-	 */
 	if ("previewData" in config && config.previewData) {
+		// If preview data is being passed from Next Context then use queryContentFromRef
+
 		const { previewData } = config;
 
 		if (isPrismicNextPreviewData(previewData) && previewData.ref) {
 			config.client.queryContentFromRef(previewData.ref);
 		}
-		/**
-		 * If the req object is passed then use enableAutoPreviewsFromReq
-		 */
 	} else if ("req" in config && config.req) {
+		// If the req object is passed then use enableAutoPreviewsFromReq
+
 		config.client.enableAutoPreviewsFromReq(config.req);
 	}
 };

package/src/exitPreview.ts

@@ -1,4 +1,4 @@
-import { NextApiResponse, NextApiRequest } from "next";
+import type { NextApiRequest, NextApiResponse } from "next";
 
 /**
  * Configuration for `exitPreview`.
@@ -10,11 +10,17 @@ export type ExitPreviewConfig = {
 	 *
 	 * @see Next.js API route docs: {@link https://nextjs.org/docs/api-routes/introduction}
 	 */
-	req: {
-		headers: {
-			referer?: NextApiRequest["headers"]["referer"];
-		};
-	};
+	// `req` is no longer used in `exitPreview()`. It previously would
+	// redirect the user to the referring URL, but it no longer has that
+	// behavior.
+	//
+	// `req` is retained as a parameter to make setting up an
+	// exit preview API route easier (this eliminates the awkward need to
+	// handle an unused `req` param).
+	//
+	// It is also retained in case it is needed in the future, such as
+	// reading headers or metadata about the request.
+	req: Pick<NextApiRequest, "headers">;
 
 	/**
 	 * The `res` object from a Next.js API route. This is given as a parameter to
@@ -22,33 +28,15 @@ export type ExitPreviewConfig = {
 	 *
 	 * @see Next.js API route docs: {@link https://nextjs.org/docs/api-routes/introduction}
 	 */
-	res: {
-		clearPreviewData: NextApiResponse["clearPreviewData"];
-		redirect: NextApiResponse["redirect"];
-	};
+	res: Pick<NextApiResponse, "clearPreviewData" | "json">;
 };
 
 /**
  * Exits Next.js's Preview Mode from within a Next.js API route.
- *
- * If the user was sent to the endpoint from a page, the user will be redirected
- * back to that page after exiting Preview Mode.
  */
 export function exitPreview(config: ExitPreviewConfig): void {
-	const { req } = config;
-	// Exit the current user from "Preview Mode". This function accepts no args.
+	// Exit the current user from Preview Mode.
 	config.res.clearPreviewData();
 
-	if (req.headers.referer) {
-		const url = new URL(req.headers.referer);
-
-		if (url.pathname !== "/api/exit-preview") {
-			// Redirect the user to the referrer page.
-			config.res.redirect(req.headers.referer);
-
-			return;
-		}
-	}
-
-	config.res.redirect("/");
+	config.res.json({ success: true });
 }

package/src/index.ts

@@ -1,10 +1,16 @@
-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 type { SetPreviewDataConfig } from "./setPreviewData";
+
 export { exitPreview } from "./exitPreview";
+export type { ExitPreviewConfig } from "./exitPreview";
+
 export { PrismicPreview } from "./PrismicPreview";
+export type { PrismicPreviewProps } from "./PrismicPreview";
+
 export { enableAutoPreviews } from "./enableAutoPreviews";
+export type { EnableAutoPreviewsConfig } from "./enableAutoPreviews";
+
 export { redirectToPreviewURL } from "./redirectToPreviewURL";
-export type { CreateClientConfig, PreviewConfig } from "./types";
+export type { RedirectToPreviewURLConfig } from "./redirectToPreviewURL";
+
+export type { CreateClientConfig } from "./types";

package/src/lib/getCookie.ts

@@ -2,6 +2,8 @@
  * The following code is a modifed version of `es-cookie` taken from
  * https://github.com/theodorejb/es-cookie
  *
+ * It only contains a simplified version of `get()`.
+ *
  * Copyright 2017 Theodore Brown
  *
  * Permission is hereby granted, free of charge, to any person obtaining a copy
@@ -27,32 +29,23 @@ const readValue = (value: string): string => {
 	return value.replace(/%3B/g, ";");
 };
 
-export const parse = (cookieString: string): { [name: string]: string } => {
-	const result: { [name: string]: string } = {};
-	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: string): { [name: string]: string } =>
-	parse(cookieStore);
-
 /**
  * Returns the value of a cookie from a given cookie store.
  *
  * @param name - Of the cookie.
- * @param cookieStore - The stringified cookie store from which to read the cookie.
  *
  * @returns The value of the cookie, if it exists.
  */
-export const getCookie = (
-	name: string,
-	cookieStore: string,
-): string | undefined => getAll(cookieStore)[name];
+export const getCookie = (name: string): string | undefined => {
+	const cookies = document.cookie.split("; ");
+
+	for (const cookie of cookies) {
+		const parts = cookie.split("=");
+		const value = parts.slice(1).join("=");
+		const thisName = readValue(parts[0]).replace(/%3D/g, "=");
+
+		if (thisName === name) {
+			return readValue(value);
+		}
+	}
+};

package/src/redirectToPreviewURL.ts

@@ -1,7 +1,6 @@
-import { NextApiRequest } from "next";
-import { LinkResolverFunction } from "@prismicio/helpers";
-
-import { PreviewConfig } from "./";
+import type { Client } from "@prismicio/client";
+import type { NextApiRequest, NextApiResponse } from "next";
+import type { LinkResolverFunction } from "@prismicio/helpers";
 
 type PrismicNextQuery = {
 	documentId: string;
@@ -18,8 +17,66 @@ type PrismicNextQuery = {
  */
 const isPrismicNextQuery = (
 	query: NextApiRequest["query"],
-): query is PrismicNextQuery =>
-	typeof query.documentId === "string" && typeof query.token === "string";
+): query is PrismicNextQuery => {
+	return (
+		typeof query.documentId === "string" && typeof query.token === "string"
+	);
+};
+
+/**
+ * Preview config for enabling previews with redirectToPreviewURL
+ */
+export type RedirectToPreviewURLConfig<
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	TLinkResolverFunction extends LinkResolverFunction<any> = LinkResolverFunction,
+> = {
+	/**
+	 * 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: Pick<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: Pick<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?: TLinkResolverFunction;
+
+	/**
+	 * The default redirect URL if a URL cannot be determined for the previewed document.
+	 *
+	 * **Note**: If your `next.config.js` file contains a `basePath`, you must
+	 * include the `basePath` as part of this option. `redirectToPreviewURL()`
+	 * cannot read your global `basePath`.
+	 */
+	defaultURL?: string;
+
+	/**
+	 * The `basePath` for the Next.js app as it is defined in `next.config.js`.
+	 * This option can be omitted if the app does not have a `basePath`.
+	 *
+	 * @remarks
+	 * The API route is unable to detect the app's `basePath` automatically. It
+	 * must be provided to `redirectToPreviewURL()` manually.
+	 */
+	basePath?: string;
+};
 
 /**
  * Redirects a user to the URL of a previewed Prismic document from within a
@@ -28,26 +85,22 @@ const isPrismicNextQuery = (
 export async function redirectToPreviewURL<
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	TLinkResolverFunction extends LinkResolverFunction<any>,
->({
-	req,
-	res,
-	client,
-	linkResolver,
-	defaultURL = "/",
-}: PreviewConfig<TLinkResolverFunction>): Promise<void> {
-	if (isPrismicNextQuery(req.query)) {
-		const { documentId, token } = req.query;
-		const previewUrl = await client.resolvePreviewURL({
-			linkResolver,
+>(config: RedirectToPreviewURLConfig<TLinkResolverFunction>): Promise<void> {
+	const defaultURL = config.defaultURL || "/";
+	const basePath = config.basePath || "";
+
+	if (isPrismicNextQuery(config.req.query)) {
+		const previewUrl = await config.client.resolvePreviewURL({
+			linkResolver: config.linkResolver,
 			defaultURL,
-			documentID: documentId,
-			previewToken: token,
+			documentID: config.req.query.documentId,
+			previewToken: config.req.query.token,
 		});
 
-		res.redirect(previewUrl);
+		config.res.redirect(basePath + previewUrl);
 
 		return;
 	}
 
-	res.redirect(defaultURL);
+	config.res.redirect(basePath + defaultURL);
 }

package/src/setPreviewData.ts

@@ -11,10 +11,7 @@ export type SetPreviewDataConfig = {
 	 *
 	 * @see Next.js API route docs: {@link https://nextjs.org/docs/api-routes/introduction}
 	 */
-	req: {
-		query: NextApiRequest["query"];
-		cookies: NextApiRequest["cookies"];
-	};
+	req: Pick<NextApiRequest, "query" | "cookies">;
 
 	/**
 	 * The `res` object from a Next.js API route. This is given as a parameter to
@@ -22,9 +19,7 @@ export type SetPreviewDataConfig = {
 	 *
 	 * @see Next.js API route docs: {@link https://nextjs.org/docs/api-routes/introduction}
 	 */
-	res: {
-		setPreviewData: NextApiResponse["setPreviewData"];
-	};
+	res: Pick<NextApiResponse, "setPreviewData">;
 };
 
 /**

package/src/types.ts

@@ -1,6 +1,4 @@
-import { PreviewData, NextApiRequest, NextApiResponse } from "next";
-import { LinkResolverFunction } from "@prismicio/helpers";
-import { Client } from "@prismicio/client";
+import { PreviewData, NextApiRequest } from "next";
 
 /**
  * Configuration for creating a Prismic client with automatic preview support in
@@ -22,48 +20,3 @@ export type CreateClientConfig = {
 	 */
 	req?: NextApiRequest;
 };
-
-/**
- * Preview config for enabling previews with redirectToPreviewURL
- */
-export type PreviewConfig<
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	TLinkResolverFunction extends LinkResolverFunction<any> = LinkResolverFunction,
-> = {
-	/**
-	 * 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?: TLinkResolverFunction;
-
-	/**
-	 * The default redirect URL if a URL cannot be determined for the previewed document.
-	 */
-	defaultURL?: string;
-};