@prismicio/next 1.1.0-alpha.1 → 1.1.0

package/src/redirectToPreviewURL.ts

@@ -1,68 +1,57 @@
-import type { NextApiRequest, NextApiResponse } from "next";
+import { redirect } from "next/navigation";
 import type * as prismic from "@prismicio/client";
 
-type PrismicNextQuery = {
-	documentId: string;
-	token: string;
-};
-
-/**
- * Determines if a query object from a Next.js API route request contains
- * Prismic preview data.
- *
- * @param query - Query object to check.
- *
- * @returns `true` if `query` contains Prismic preview data, `false` otherwise.
- */
-const isPrismicNextQuery = (
-	query: NextApiRequest["query"],
-): query is PrismicNextQuery => {
-	return (
-		typeof query.documentId === "string" && typeof query.token === "string"
-	);
-};
+import {
+	NextApiRequestLike,
+	NextApiResponseLike,
+	NextRequestLike,
+} from "./types";
 
 /**
  * Preview config for enabling previews with redirectToPreviewURL
  */
-export type RedirectToPreviewURLConfig<
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	TLinkResolverFunction extends prismic.LinkResolverFunction<any> = prismic.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"];
-	};
+export type RedirectToPreviewURLConfig = (
+	| {
+			/**
+			 * The `request` object from a Next.js Route Handler.
+			 *
+			 * @see Next.js Route Handler docs: \<https://beta.nextjs.org/docs/routing/route-handlers\>
+			 */
+			request: NextRequestLike;
+	  }
+	| {
+			/**
+			 * The `req` object from a Next.js API route.
+			 *
+			 * @see Next.js API route docs: \<https://nextjs.org/docs/api-routes/introduction\>
+			 */
+			req: NextApiRequestLike;
 
+			/**
+			 * The `res` object from a Next.js API route.
+			 *
+			 * @see Next.js API route docs: \<https://nextjs.org/docs/api-routes/introduction\>
+			 */
+			res: NextApiResponseLike;
+	  }
+) & {
 	/**
 	 * The Prismic client configured for the preview session's repository.
 	 */
 	// `Pick` is used to use the smallest possible subset of
 	// `prismic.Client`. Doing this reduces the surface area for breaking
 	// type changes.
-	client: Pick<prismic.Client, "resolvePreviewURL">;
+	client: Pick<
+		prismic.Client,
+		"enableAutoPreviewsFromReq" | "resolvePreviewURL"
+	>;
 
 	/**
 	 * 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;
+	linkResolver?: prismic.LinkResolverFunction;
 
 	/**
 	 * The default redirect URL if a URL cannot be determined for the previewed
@@ -79,35 +68,40 @@ export type RedirectToPreviewURLConfig<
 	 * 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.
+	 * The Router Handler or 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.
+ * Redirects a visitor to the URL of a previewed Prismic document from within a
+ * Next.js Route Handler or API route.
  */
-export async function redirectToPreviewURL<
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	TLinkResolverFunction extends prismic.LinkResolverFunction<any>,
->(config: RedirectToPreviewURLConfig<TLinkResolverFunction>): Promise<void> {
-	const defaultURL = config.defaultURL || "/";
+export async function redirectToPreviewURL(
+	config: RedirectToPreviewURLConfig,
+): Promise<void> {
 	const basePath = config.basePath || "";
+	const request = "request" in config ? config.request : config.req;
 
-	if (isPrismicNextQuery(config.req.query)) {
-		const previewUrl = await config.client.resolvePreviewURL({
-			linkResolver: config.linkResolver,
-			defaultURL,
-			documentID: config.req.query.documentId,
-			previewToken: config.req.query.token,
-		});
+	config.client.enableAutoPreviewsFromReq(request);
+
+	const previewUrl = await config.client.resolvePreviewURL({
+		linkResolver: config.linkResolver,
+		defaultURL: config.defaultURL || "/",
+	});
+
+	if ("nextUrl" in request) {
+		redirect(basePath + previewUrl);
+	} else {
+		if (!("res" in config)) {
+			throw new Error(
+				"[redirectToPreviewURL] The `res` object from the API route must be provided to `redirectToPreviewURL()`.",
+			);
+		}
 
 		config.res.redirect(basePath + previewUrl);
 
 		return;
 	}
-
-	config.res.redirect(basePath + defaultURL);
 }

package/src/setPreviewData.ts

@@ -1,33 +1,29 @@
-import { NextApiResponse, NextApiRequest } from "next";
 import * as prismic from "@prismicio/client";
 
+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 function setPreviewData({ req, res }: SetPreviewDataConfig): void {

package/src/types.ts

@@ -1,23 +1,72 @@
-import type { PreviewData, NextApiRequest } from "next";
+import type { PreviewData } from "next";
 import type { ClientConfig } from "@prismicio/client";
 
+// Add Next.js-specific fetchOptions to `@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).**
+	 *
+	 * The `req` object from a Next.js API route.
 	 *
-	 * Pass a `req` object when using in a Next.js API endpoint.
+	 * @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;
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	json(body: any): void;
+	setPreviewData(data: object | string): NextApiResponseLike;
+};

package/dist/react-server/PrismicPreview.d.ts

@@ -1,22 +0,0 @@
-import * as React from "react";
-/**
- * Props for `<PrismicPreview>`.
- */
-export type PrismicPreviewProps = {
-    /**
-     * The name of your Prismic repository. A Prismic Toolbar will be registered
-     * using this repository.
-     */
-    repositoryName: string;
-    children?: React.ReactNode;
-};
-/**
- * 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 Next.js Preview Mode
- * and refresh the page.
- *
- * This component can be wrapped around your app or added anywhere in your app's
- * tree. It must be rendered on every page.
- */
-export declare function PrismicPreview({ repositoryName, children, }: PrismicPreviewProps): JSX.Element;

package/dist/react-server/index.d.ts

@@ -1,2 +0,0 @@
-export { PrismicPreview, enableAutoPreviews, redirectToPreviewURL, exitPreview, setPreviewData, } from "./unsupported";
-export { PrismicNextImage, imgixLoader, PrismicNextLink } from "..";

package/dist/react-server/unsupported.cjs

@@ -1,26 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-function buildIncompatiblePreviewModeError(fnName) {
-  return `${fnName} is currently incompatible with App Router. Preview Mode is not supported in App Router at this time. Please remove all uses of ${fnName}.`;
-}
-function PrismicPreview() {
-  throw new Error(buildIncompatiblePreviewModeError("<PrismicPreview>"));
-}
-function enableAutoPreviews() {
-  throw new Error(buildIncompatiblePreviewModeError("enableAutoPreviews()"));
-}
-function exitPreview() {
-  throw new Error(buildIncompatiblePreviewModeError("exitPreview()"));
-}
-function redirectToPreviewURL() {
-  throw new Error(buildIncompatiblePreviewModeError("redirectToPreviewURL()"));
-}
-function setPreviewData() {
-  throw new Error(buildIncompatiblePreviewModeError("setPreviewData()"));
-}
-exports.PrismicPreview = PrismicPreview;
-exports.enableAutoPreviews = enableAutoPreviews;
-exports.exitPreview = exitPreview;
-exports.redirectToPreviewURL = redirectToPreviewURL;
-exports.setPreviewData = setPreviewData;
-//# sourceMappingURL=unsupported.cjs.map

package/dist/react-server/unsupported.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"unsupported.cjs","sources":["../../../src/react-server/unsupported.ts"],"sourcesContent":["// Exports in this file are unsupported in the react-server environment.\n// All environments should export the same functions to maintian API compatability.\n\nfunction buildIncompatiblePreviewModeError(fnName: string) {\n\treturn `${fnName} is currently incompatible with App Router. Preview Mode is not supported in App Router at this time. Please remove all uses of ${fnName}.`;\n}\n\nexport function PrismicPreview(): JSX.Element {\n\tthrow new Error(buildIncompatiblePreviewModeError(\"<PrismicPreview>\"));\n}\n\nexport function enableAutoPreviews() {\n\tthrow new Error(buildIncompatiblePreviewModeError(\"enableAutoPreviews()\"));\n}\n\nexport function exitPreview() {\n\tthrow new Error(buildIncompatiblePreviewModeError(\"exitPreview()\"));\n}\n\nexport function redirectToPreviewURL() {\n\tthrow new Error(buildIncompatiblePreviewModeError(\"redirectToPreviewURL()\"));\n}\n\nexport function setPreviewData() {\n\tthrow new Error(buildIncompatiblePreviewModeError(\"setPreviewData()\"));\n}\n"],"names":[],"mappings":";;AAGA,SAAS,kCAAkC,QAAc;AACxD,SAAO,GAAG,yIAAyI;AACpJ;SAEgB,iBAAc;AAC7B,QAAM,IAAI,MAAM,kCAAkC,kBAAkB,CAAC;AACtE;SAEgB,qBAAkB;AACjC,QAAM,IAAI,MAAM,kCAAkC,sBAAsB,CAAC;AAC1E;SAEgB,cAAW;AAC1B,QAAM,IAAI,MAAM,kCAAkC,eAAe,CAAC;AACnE;SAEgB,uBAAoB;AACnC,QAAM,IAAI,MAAM,kCAAkC,wBAAwB,CAAC;AAC5E;SAEgB,iBAAc;AAC7B,QAAM,IAAI,MAAM,kCAAkC,kBAAkB,CAAC;AACtE;;;;;;"}

package/dist/react-server/unsupported.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-export declare function PrismicPreview(): JSX.Element;
-export declare function enableAutoPreviews(): void;
-export declare function exitPreview(): void;
-export declare function redirectToPreviewURL(): void;
-export declare function setPreviewData(): void;

package/dist/react-server/unsupported.js

@@ -1,26 +0,0 @@
-function buildIncompatiblePreviewModeError(fnName) {
-  return `${fnName} is currently incompatible with App Router. Preview Mode is not supported in App Router at this time. Please remove all uses of ${fnName}.`;
-}
-function PrismicPreview() {
-  throw new Error(buildIncompatiblePreviewModeError("<PrismicPreview>"));
-}
-function enableAutoPreviews() {
-  throw new Error(buildIncompatiblePreviewModeError("enableAutoPreviews()"));
-}
-function exitPreview() {
-  throw new Error(buildIncompatiblePreviewModeError("exitPreview()"));
-}
-function redirectToPreviewURL() {
-  throw new Error(buildIncompatiblePreviewModeError("redirectToPreviewURL()"));
-}
-function setPreviewData() {
-  throw new Error(buildIncompatiblePreviewModeError("setPreviewData()"));
-}
-export {
-  PrismicPreview,
-  enableAutoPreviews,
-  exitPreview,
-  redirectToPreviewURL,
-  setPreviewData
-};
-//# sourceMappingURL=unsupported.js.map

package/dist/react-server/unsupported.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"unsupported.js","sources":["../../../src/react-server/unsupported.ts"],"sourcesContent":["// Exports in this file are unsupported in the react-server environment.\n// All environments should export the same functions to maintian API compatability.\n\nfunction buildIncompatiblePreviewModeError(fnName: string) {\n\treturn `${fnName} is currently incompatible with App Router. Preview Mode is not supported in App Router at this time. Please remove all uses of ${fnName}.`;\n}\n\nexport function PrismicPreview(): JSX.Element {\n\tthrow new Error(buildIncompatiblePreviewModeError(\"<PrismicPreview>\"));\n}\n\nexport function enableAutoPreviews() {\n\tthrow new Error(buildIncompatiblePreviewModeError(\"enableAutoPreviews()\"));\n}\n\nexport function exitPreview() {\n\tthrow new Error(buildIncompatiblePreviewModeError(\"exitPreview()\"));\n}\n\nexport function redirectToPreviewURL() {\n\tthrow new Error(buildIncompatiblePreviewModeError(\"redirectToPreviewURL()\"));\n}\n\nexport function setPreviewData() {\n\tthrow new Error(buildIncompatiblePreviewModeError(\"setPreviewData()\"));\n}\n"],"names":[],"mappings":"AAGA,SAAS,kCAAkC,QAAc;AACxD,SAAO,GAAG,yIAAyI;AACpJ;SAEgB,iBAAc;AAC7B,QAAM,IAAI,MAAM,kCAAkC,kBAAkB,CAAC;AACtE;SAEgB,qBAAkB;AACjC,QAAM,IAAI,MAAM,kCAAkC,sBAAsB,CAAC;AAC1E;SAEgB,cAAW;AAC1B,QAAM,IAAI,MAAM,kCAAkC,eAAe,CAAC;AACnE;SAEgB,uBAAoB;AACnC,QAAM,IAAI,MAAM,kCAAkC,wBAAwB,CAAC;AAC5E;SAEgB,iBAAc;AAC7B,QAAM,IAAI,MAAM,kCAAkC,kBAAkB,CAAC;AACtE;"}

package/dist/react-server.cjs

@@ -1,15 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const unsupported = require("./react-server/unsupported.cjs");
-const PrismicNextLink = require("./PrismicNextLink.cjs");
-const PrismicNextImage = require("./PrismicNextImage.cjs");
-const imgixLoader = require("./imgixLoader.cjs");
-exports.PrismicPreview = unsupported.PrismicPreview;
-exports.enableAutoPreviews = unsupported.enableAutoPreviews;
-exports.exitPreview = unsupported.exitPreview;
-exports.redirectToPreviewURL = unsupported.redirectToPreviewURL;
-exports.setPreviewData = unsupported.setPreviewData;
-exports.PrismicNextLink = PrismicNextLink.PrismicNextLink;
-exports.PrismicNextImage = PrismicNextImage.PrismicNextImage;
-exports.imgixLoader = imgixLoader.imgixLoader;
-//# sourceMappingURL=react-server.cjs.map

package/dist/react-server.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"react-server.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}

package/dist/react-server.js

@@ -1,15 +0,0 @@
-import { PrismicPreview, enableAutoPreviews, exitPreview, redirectToPreviewURL, setPreviewData } from "./react-server/unsupported.js";
-import { PrismicNextLink } from "./PrismicNextLink.js";
-import { PrismicNextImage } from "./PrismicNextImage.js";
-import { imgixLoader } from "./imgixLoader.js";
-export {
-  PrismicNextImage,
-  PrismicNextLink,
-  PrismicPreview,
-  enableAutoPreviews,
-  exitPreview,
-  imgixLoader,
-  redirectToPreviewURL,
-  setPreviewData
-};
-//# sourceMappingURL=react-server.js.map

package/dist/react-server.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"react-server.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/src/react-server/PrismicPreview.tsx

@@ -1,74 +0,0 @@
-"use client";
-
-import * as React from "react";
-import Script from "next/script";
-import * as prismic from "@prismicio/client";
-
-/**
- * Props for `<PrismicPreview>`.
- */
-export type PrismicPreviewProps = {
-	/**
-	 * The name of your Prismic repository. A Prismic Toolbar will be registered
-	 * using this repository.
-	 */
-	repositoryName: string;
-
-	children?: React.ReactNode;
-};
-
-/**
- * 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 Next.js Preview Mode
- * and refresh the page.
- *
- * This component can be wrapped around your app or added anywhere in your app's
- * tree. It must be rendered on every page.
- */
-export function PrismicPreview({
-	repositoryName,
-	children,
-}: PrismicPreviewProps): JSX.Element {
-	const prismicToolbarSrc = prismic.getToolbarSrc(repositoryName);
-
-	React.useEffect(() => {
-		const handlePrismicPreviewUpdate = async (event: Event) => {
-			// Prevent the toolbar from reloading the page.
-			event.preventDefault();
-
-			// TODO: Handle preview updates.
-
-			// eslint-disable-next-line no-console
-			console.log("[PrismicPreview]: Update event called.");
-		};
-
-		const handlePrismicPreviewEnd = async (event: Event) => {
-			// Prevent the toolbar from reloading the page.
-			event.preventDefault();
-
-			// TODO: Handle preview exit.
-
-			// eslint-disable-next-line no-console
-			console.log("[PrismicPreview]: End event called.");
-		};
-
-		window.addEventListener("prismicPreviewUpdate", handlePrismicPreviewUpdate);
-		window.addEventListener("prismicPreviewEnd", handlePrismicPreviewEnd);
-
-		return () => {
-			window.removeEventListener(
-				"prismicPreviewUpdate",
-				handlePrismicPreviewUpdate,
-			);
-			window.removeEventListener("prismicPreviewEnd", handlePrismicPreviewEnd);
-		};
-	}, []);
-
-	return (
-		<>
-			{children}
-			<Script src={prismicToolbarSrc} strategy="lazyOnload" />
-		</>
-	);
-}

package/src/react-server/index.ts

@@ -1,11 +0,0 @@
-export {
-	PrismicPreview,
-	enableAutoPreviews,
-	redirectToPreviewURL,
-	exitPreview,
-	setPreviewData,
-} from "./unsupported";
-
-// These exports do not have RSC-specific implementations.
-// They are aliases for the root-level exports.
-export { PrismicNextImage, imgixLoader, PrismicNextLink } from "..";

package/src/react-server/unsupported.ts

@@ -1,26 +0,0 @@
-// Exports in this file are unsupported in the react-server environment.
-// All environments should export the same functions to maintian API compatability.
-
-function buildIncompatiblePreviewModeError(fnName: string) {
-	return `${fnName} is currently incompatible with App Router. Preview Mode is not supported in App Router at this time. Please remove all uses of ${fnName}.`;
-}
-
-export function PrismicPreview(): JSX.Element {
-	throw new Error(buildIncompatiblePreviewModeError("<PrismicPreview>"));
-}
-
-export function enableAutoPreviews() {
-	throw new Error(buildIncompatiblePreviewModeError("enableAutoPreviews()"));
-}
-
-export function exitPreview() {
-	throw new Error(buildIncompatiblePreviewModeError("exitPreview()"));
-}
-
-export function redirectToPreviewURL() {
-	throw new Error(buildIncompatiblePreviewModeError("redirectToPreviewURL()"));
-}
-
-export function setPreviewData() {
-	throw new Error(buildIncompatiblePreviewModeError("setPreviewData()"));
-}