@prismicio/next 1.7.1 → 2.0.0-alpha.1

package/src/PrismicPreviewClient.tsx

@@ -1,156 +1,130 @@
 "use client";
 
 import { useEffect } from "react";
-import { useRouter as usePagesRouter } from "next/router";
+import { cookie as prismicCookie } from "@prismicio/client";
 import { useRouter } from "next/navigation";
 
-import { getPrismicPreviewCookie } from "./lib/getPrismicPreviewCookie";
-import { getPreviewCookieRepositoryName } from "./lib/getPreviewCookieRepositoryName";
-
-import { PrismicPreviewProps } from "./PrismicPreview";
-
-type PrismicPreviewClientProps = Omit<PrismicPreviewProps, "children"> & {
+type PrismicPreviewClientProps = {
+	repositoryName: string;
 	isDraftMode: boolean;
+	updatePreviewURL?: string;
+	exitPreviewURL?: string;
 };
 
-export function PrismicPreviewClient({
-	repositoryName,
-	updatePreviewURL = "/api/preview",
-	exitPreviewURL = "/api/exit-preview",
-	isDraftMode,
-}: PrismicPreviewClientProps): null {
-	let isPreviewActive = isDraftMode;
-	let isAppRouter = true;
-	let basePath = "";
-	let refresh: () => void;
-
-	try {
-		// eslint-disable-next-line react-hooks/rules-of-hooks
-		const router = usePagesRouter();
-
-		isAppRouter = false;
-		basePath = router.basePath;
-		isPreviewActive ||= 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;
-	}
+export function PrismicPreviewClient(props: PrismicPreviewClientProps): null {
+	const {
+		repositoryName,
+		isDraftMode,
+		updatePreviewURL = "/api/preview",
+		exitPreviewURL = "/api/exit-preview",
+	} = props;
 
-	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();
+	const { refresh } = useRouter();
 
-			if (isAppRouter) {
-				refresh();
-			} else {
-				await startPreviewMode();
-			}
-		};
+	useEffect(() => {
+		const controller = new AbortController();
+
+		window.addEventListener("prismicPreviewUpdate", onUpdate, {
+			signal: controller.signal,
+		});
+		window.addEventListener("prismicPreviewEnd", onEnd, {
+			signal: controller.signal,
+		});
+
+		const cookie = getPrismicPreviewCookie(window.document.cookie);
+		const cookieRepositoryName = cookie
+			? (decodeURIComponent(cookie).match(/"([^"]+)\.prismic\.io"/) || [])[1]
+			: undefined;
+		const hasCookieForRepository = cookieRepositoryName === repositoryName;
+
+		// Start the preview for preview share links. Previews from
+		// share links do not go to the `updatePreviewURL` like a normal
+		// preview.
+		if (hasCookieForRepository && !isDraftMode) {
+			console.log("starting preview link");
+
+			// We check `opaqueredirect` because we don't care if
+			// the redirect was successful or not. As long as it
+			// redirects, we know the endpoint exists and draft mode
+			// is active.
+			globalThis
+				.fetch(updatePreviewURL, {
+					redirect: "manual",
+					signal: controller.signal,
+				})
+				.then((res) => {
+					if (res.type !== "opaqueredirect") {
+						console.error(
+							`[<PrismicPreview>] Failed to start the preview using "${updatePreviewURL}". Does it exist?`,
+						);
+
+						return;
+					}
+
+					refresh();
+				})
+				.catch(() => {
+					// noop
+				});
+		}
 
-		const handlePrismicPreviewEnd = async (event: Event) => {
-			// Prevent the toolbar from reloading the page.
+		function onUpdate(event: Event) {
 			event.preventDefault();
+			refresh();
+		}
 
-			const resolvedExitPreviewURL = basePath + exitPreviewURL;
-
-			// Exit Next.js Preview Mode via the given preview API endpoint.
-			const res = await globalThis.fetch(resolvedExitPreviewURL);
-
-			if (res.ok) {
-				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 (!isPreviewActive) {
-			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();
-				}
-			}
+		function onEnd(event: Event) {
+			event.preventDefault();
+			globalThis
+				.fetch(exitPreviewURL, { signal: controller.signal })
+				.then((res) => {
+					if (!res.ok) {
+						console.error(
+							`[<PrismicPreview>] Failed to exit Preview Mode using the "${exitPreviewURL}" API endpoint. Does it exist?`,
+						);
+
+						return;
+					}
+
+					refresh();
+				})
+				.catch(() => {
+					// noop
+				});
 		}
 
-		return () => {
-			window.removeEventListener(
-				"prismicPreviewUpdate",
-				handlePrismicPreviewUpdate,
-			);
-			window.removeEventListener("prismicPreviewEnd", handlePrismicPreviewEnd);
-		};
-	}, [
-		basePath,
-		exitPreviewURL,
-		isAppRouter,
-		isPreviewActive,
-		refresh,
-		repositoryName,
-		updatePreviewURL,
-	]);
+		return () => controller.abort();
+	}, [repositoryName, isDraftMode, updatePreviewURL, exitPreviewURL, refresh]);
 
 	return null;
 }
+
+/**
+ * Returns the value of a cookie from a given cookie store.
+ *
+ * @param cookieJar - The stringified cookie store from which to read the
+ *   cookie.
+ *
+ * @returns The value of the cookie, if it exists.
+ */
+function getPrismicPreviewCookie(cookieJar: string): string | undefined {
+	function readValue(value: string): string {
+		return value.replace(/%3B/g, ";");
+	}
+
+	const cookies = cookieJar.split("; ");
+
+	let value: string | undefined;
+
+	for (const cookie of cookies) {
+		const parts = cookie.split("=");
+		const name = readValue(parts[0]).replace(/%3D/g, "=");
+
+		if (name === prismicCookie.preview) {
+			value = readValue(parts.slice(1).join("="));
+			continue;
+		}
+	}
+
+	return value;
+}

package/src/createLocaleRedirect.ts

@@ -1,60 +1,18 @@
-import Negotiator from "negotiator";
-import { match } from "@formatjs/intl-localematcher";
-import * as prismic from "@prismicio/client";
-
-import { NextRequestLike } from "./types";
-
-export type CreateLocaleRedirectConfig = {
-	request: NextRequestLike;
-	client: Pick<prismic.Client, "getRepository">;
-	localeOverrides?: Record<string, string>;
-	omitDefaultLocale?: boolean;
-};
+import { devMsg } from "./lib/devMsg.js";
 
 /**
- * Creates a `Response` that redirects a request to the requester's preferred
- * locale. This function returns `undefined` if the request already contains a
- * locale.
- *
- * @returns A `Response` if the request should be redirected, `undefined`
- *   otherwise.
+ * @deprecated `createLocaleRedirect()` has been removed due to performance
+ *   issues.
  */
-export const createLocaleRedirect = async (
-	config: CreateLocaleRedirectConfig,
-): Promise<Response | undefined> => {
-	const repository = await config.client.getRepository();
-
-	const locales = repository.languages.map((language) => {
-		return config.localeOverrides?.[language.id] ?? language.id;
-	});
-	const defaultLocale = locales[0];
-
-	const { pathname } = config.request.nextUrl;
-	const pathnameHasLocale = locales.some(
-		(locale) => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`,
+export function createLocaleRedirect() {
+	throw new Error(
+		`createLocaleRedirect() has been removed due to performance issues. See ${devMsg(
+			"replace-createLocaleRedirect",
+		)} for more details.`,
 	);
-
-	if (pathnameHasLocale) {
-		return;
-	}
-
-	let locale = defaultLocale;
-
-	const headers = {
-		"accept-language":
-			config.request.headers.get("accept-language") ?? undefined,
-	};
-
-	if (headers["accept-language"]) {
-		const languages = new Negotiator({ headers }).languages();
-		locale = match(languages, locales, defaultLocale);
-	}
-
-	if (locale === defaultLocale && config.omitDefaultLocale) {
-		return;
-	}
-
-	config.request.nextUrl.pathname = `/${locale}${pathname}`;
-
-	return Response.redirect(config.request.nextUrl as URL);
-};
+}
+/**
+ * @deprecated `createLocaleRedirect()` has been removed due to performance
+ *   issues.
+ */
+export type CreateLocaleRedirectConfig = never;

package/src/enableAutoPreviews.ts

@@ -1,125 +1,53 @@
-import { draftMode, cookies } from "next/headers";
-import { PreviewData } from "next";
-import * as prismic from "@prismicio/client";
+import { type Client, cookie as prismicCookie } from "@prismicio/client";
 
-import { NextApiRequestLike, PrismicPreviewData } from "./types";
-
-/**
- * Configuration for `enableAutoPreviews`.
- *
- * @typeParam TPreviewData - Next.js preview data object.
- */
-export type EnableAutoPreviewsConfig<
-	TPreviewData extends PreviewData = PreviewData,
-> = {
-	/**
-	 * Prismic client with which automatic previews will be enabled.
-	 */
+/** Configuration for `enableAutoPreviews`. */
+export type EnableAutoPreviewsConfig = {
+	/** Prismic client with which automatic previews will be enabled. */
 	// `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,
-		"queryContentFromRef" | "enableAutoPreviewsFromReq"
-	>;
-
-	/**
-	 * **Only used in the Pages Directory (/pages).**
-	 *
-	 * The `previewData` object provided in the `getStaticProps()` or
-	 * `getServerSideProps()` context object.
-	 */
-	previewData?: TPreviewData;
-
-	/**
-	 * **Only used in the Pages Directory (/pages).**
-	 *
-	 * The `req` object from a Next.js API route.
-	 *
-	 * @see Next.js API route docs: \<https://nextjs.org/docs/api-routes/introduction\>
-	 */
-	req?: NextApiRequestLike;
-};
-
-const isPrismicPreviewData = (input: unknown): input is PrismicPreviewData => {
-	return typeof input === "object" && input !== null && "ref" in input;
+	client: Pick<Client, "queryContentFromRef" | "enableAutoPreviewsFromReq">;
 };
 
 /**
  * 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.
+ * preview session.
  *
  * @param config - Configuration for the function.
  */
-export const enableAutoPreviews = <TPreviewData extends PreviewData>(
-	config: EnableAutoPreviewsConfig<TPreviewData>,
-): void => {
-	if ("previewData" in config && config.previewData) {
-		// Assume we are in `getStaticProps()` or
-		// `getServerSideProps()` with active Preview Mode (`pages`
-		// directory).
-
-		if (isPrismicPreviewData(config.previewData)) {
-			config.client.queryContentFromRef(config.previewData.ref);
+export function enableAutoPreviews(config: EnableAutoPreviewsConfig): void {
+	// We use a function value so the cookie is checked on every
+	// request. We don't have a static value to read from.
+	config.client.queryContentFromRef(async () => {
+		// Need this to avoid the following Next.js build-time error:
+		// You're importing a component that needs next/headers. That only works
+		// in a Server Component which is not supported in the pages/ directory.
+		const { cookies, draftMode } = await import("next/headers");
+
+		let isDraftModeEnabled = false;
+		try {
+			isDraftModeEnabled = (await draftMode()).isEnabled;
+		} catch {
+			// `draftMode()` may have been called in a palce that
+			// does not have access to its async storage. This
+			// occurs in places like `generateStaticParams()`. We
+			// can ignore this case.
+			return;
+		}
+		if (!isDraftModeEnabled) {
+			return;
 		}
-	} else if ("req" in config && config.req) {
-		// Assume we are in an API Route (`pages` directory).
-
-		config.client.enableAutoPreviewsFromReq(config.req);
-	} else {
-		// Assume we are in App Router (`app` directory) OR
-		// `getStaticProps()`/`getServerSideProps()` with an inactive
-		// Preview Mode (`pages` directory).
-
-		// We use a function value so the cookie is checked on every
-		// request. We don't have a static value to read from.
-		config.client.queryContentFromRef(async () => {
-			let isDraftModeEnabled = false;
-			try {
-				isDraftModeEnabled = (await draftMode()).isEnabled;
-			} catch {
-				// This catch block may be reached if
-				// `draftMode()` is called in a place that does
-				// not have access to its async storage. We can
-				// ignore this case.
-
-				return;
-			}
-
-			if (!isDraftModeEnabled) {
-				return;
-			}
 
-			let cookie: string | undefined;
-			try {
-				cookie = (await cookies()).get(prismic.cookie.preview)?.value;
-			} catch {
-				// We are probably in `getStaticProps()` or
-				// `getServerSideProps()` with inactive Preview
-				// Mode where `cookies()` does not work. We
-				// don't need to do any preview handling.
+		const cookie = (await cookies()).get(prismicCookie.preview)?.value;
+		if (!cookie) {
+			return;
+		}
 
-				return;
-			}
+		const isActiveCookie = cookie.includes("websitePreviewId=");
+		if (!isActiveCookie) {
+			return;
+		}
 
-			// We only return the cookie if a Prismic Preview session is active.
-			//
-			// An inactive cookie looks like this (URL encoded):
-			// 	{
-			// 		"_tracker": "abc123"
-			// 	}
-			//
-			// An active cookie looks like this (URL encoded):
-			// 	{
-			// 		"_tracker": "abc123",
-			// 		"example-prismic-repo.prismic.io": {
-			// 			preview: "https://example-prismic-repo.prismic.io/previews/abc:123?websitePreviewId=xyz"
-			// 		}
-			// 	}
-			if (cookie && /\.prismic\.io/.test(cookie)) {
-				return cookie;
-			}
-		});
-	}
-};
+		return cookie;
+	});
+}

package/src/exitPreview.ts

@@ -1,94 +1,31 @@
-import { draftMode } from "next/headers";
-
-import { NextApiRequestLike, NextApiResponseLike } from "./types";
-
-/**
- * @deprecated Use `ExitPreviewAPIRouteConfig` instead when `exitPreview()` is
- *   used in a Pages Router API endpoint. `exitPreview()` does not require any
- *   configuration when used in an App Router Route Handler.
- */
-export type ExitPreviewConfig = ExitPreviewAPIRouteConfig;
-
-/**
- * Configuration for `exitPreview()` when used in a Pages Router API route.
- */
-export type ExitPreviewAPIRouteConfig = {
-	/**
-	 * **Only use this parameter in the Pages Directory (/pages).**
-	 *
-	 * The `req` object from a Next.js API route.
-	 *
-	 * @see Next.js API route docs: \<https://nextjs.org/docs/api-routes/introduction\>
-	 */
-	req?: NextApiRequestLike;
-
-	/**
-	 * **Only use this parameter in the Pages Directory (/pages).**
-	 *
-	 * The `res` object from a Next.js API route.
-	 *
-	 * @see Next.js API route docs: \<https://nextjs.org/docs/api-routes/introduction\>
-	 */
-	res?: NextApiResponseLike;
-};
-
 /**
  * Ends a Prismic preview session within a Next.js app. This function should be
- * used in a Router Handler or an API route, depending on whether you are using
- * the App Router or Pages Router.
+ * used in a Router Handler.
  *
- * @example Usage within an App Router Route Handler.
+ * @example
  *
  * ```typescript
  * // src/app/api/exit-preview/route.js
  *
  * import { exitPreview } from "@prismicio/next";
  *
- * export function GET() {
- * 	return exitPreview();
- * }
- * ```
- *
- * @example Usage within a Pages Router API Route.
- *
- * ```typescript
- * // src/pages/api/exit-preview.js
- *
- * import { exitPreview } from "@prismicio/next";
- *
- * export default function handler(req, res) {
- * 	exitPreview({ req, res });
+ * export async function GET() {
+ * 	return await exitPreview();
  * }
  * ```
  */
-export async function exitPreview(): Promise<Response>;
-export async function exitPreview(
-	config: ExitPreviewAPIRouteConfig,
-): Promise<void>;
-export async function exitPreview(
-	config?: ExitPreviewAPIRouteConfig,
-): Promise<Response | void> {
-	if (config?.res) {
-		// Assume Preview Mode is being used.
-
-		config.res.clearPreviewData();
-
-		// `Cache-Control` header is used to prevent CDN-level caching.
-		config.res.setHeader("Cache-Control", "no-store");
-
-		config.res.json({ success: true });
-
-		return;
-	} else {
-		// Assume Draft Mode is being used.
-
-		(await draftMode()).disable();
-
-		// `Cache-Control` header is used to prevent CDN-level caching.
-		return new Response(JSON.stringify({ success: true }), {
-			headers: {
-				"Cache-Control": "no-store",
-			},
-		});
-	}
+export async function exitPreview(): Promise<Response> {
+	// Need this to avoid the following Next.js build-time error:
+	// You're importing a component that needs next/headers. That only works
+	// in a Server Component which is not supported in the pages/ directory.
+	const { draftMode } = await import("next/headers");
+
+	(await draftMode()).disable();
+
+	// `Cache-Control` header is used to prevent CDN-level caching.
+	return new Response(JSON.stringify({ success: true }), {
+		headers: {
+			"Cache-Control": "no-store",
+		},
+	});
 }

package/src/index.ts

@@ -1,34 +1,23 @@
-export { setPreviewData } from "./setPreviewData";
-export type { SetPreviewDataConfig } from "./setPreviewData";
+export { exitPreview } from "./exitPreview.js";
 
-export { exitPreview } from "./exitPreview";
-export type {
-	ExitPreviewConfig,
-	ExitPreviewAPIRouteConfig,
-} from "./exitPreview";
+export { PrismicPreview } from "./PrismicPreview.js";
+export type { PrismicPreviewProps } from "./PrismicPreview.js";
 
-export { PrismicPreview } from "./PrismicPreview";
-export type { PrismicPreviewProps } from "./PrismicPreview";
+export { PrismicNextLink } from "./PrismicNextLink.js";
+export type { PrismicNextLinkProps } from "./PrismicNextLink.js";
 
-export { PrismicNextLink } from "./PrismicNextLink";
-export type { PrismicNextLinkProps } from "./PrismicNextLink";
+export { enableAutoPreviews } from "./enableAutoPreviews.js";
+export type { EnableAutoPreviewsConfig } from "./enableAutoPreviews.js";
 
-export { enableAutoPreviews } from "./enableAutoPreviews";
-export type { EnableAutoPreviewsConfig } from "./enableAutoPreviews";
+export { redirectToPreviewURL } from "./redirectToPreviewURL.js";
+export type { RedirectToPreviewURLConfig } from "./redirectToPreviewURL.js";
 
-export { redirectToPreviewURL } from "./redirectToPreviewURL";
-export type {
-	RedirectToPreviewURLConfig,
-	RedirectToPreviewURLRouteHandlerConfig,
-	RedirectToPreviewURLAPIEndpointConfig,
-} from "./redirectToPreviewURL";
+export { PrismicNextImage } from "./PrismicNextImage.js";
+export type { PrismicNextImageProps } from "./PrismicNextImage.js";
 
-export { createLocaleRedirect } from "./createLocaleRedirect";
-export type { CreateLocaleRedirectConfig } from "./createLocaleRedirect";
+export { imgixLoader } from "./imgixLoader.js";
 
-export { PrismicNextImage } from "./PrismicNextImage";
-export type { PrismicNextImageProps } from "./PrismicNextImage";
+export type { CreateClientConfig } from "./types.js";
 
-export { imgixLoader } from "./imgixLoader";
-
-export type { CreateClientConfig, PrismicPreviewData } from "./types";
+export { createLocaleRedirect } from "./createLocaleRedirect.js";
+export type { CreateLocaleRedirectConfig } from "./createLocaleRedirect.js";

package/src/lib/devMsg.ts

@@ -7,7 +7,7 @@ import { version } from "../../package.json";
  *
  * ```ts
  * devMsg("missing-param");
- * // => "https://prismic.dev/msg/next/v1.2.3/missing-param.md"
+ * // => "https://prismic.dev/msg/next/v1.2.3/missing-param"
  * ```
  *
  * @param slug - Slug for the message. This corresponds to a Markdown file in