@prismicio/next 1.7.0 → 2.0.0-alpha.0

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(() => {
-			let isDraftModeEnabled = false;
-			try {
-				isDraftModeEnabled = 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 = 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,92 +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 function exitPreview(): Response;
-export function exitPreview(config: ExitPreviewAPIRouteConfig): void;
-export function exitPreview(
-	config?: ExitPreviewAPIRouteConfig,
-): 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.
-
-		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

package/src/pages/PrismicPreview.tsx

@@ -0,0 +1,145 @@
+import { type ReactNode, useEffect, JSX } from "react";
+import { useRouter } from "next/router";
+import Script from "next/script";
+import { getToolbarSrc, cookie as prismicCookie } 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;
+
+	/**
+	 * The URL of your app's Prismic preview endpoint (default: `/api/preview`).
+	 * This URL will be fetched on preview update events.
+	 */
+	updatePreviewURL?: string;
+
+	/**
+	 * The URL of your app's exit preview endpoint (default: `/api/exit-preview`).
+	 * This URL will be fetched on preview exit events.
+	 */
+	exitPreviewURL?: string;
+
+	/** Children to render adjacent to the Prismic Toolbar. */
+	children?: 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 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.
+ */
+export function PrismicPreview(props: PrismicPreviewProps): JSX.Element {
+	const {
+		repositoryName,
+		updatePreviewURL = "/api/preview",
+		exitPreviewURL = "/api/exit-preview",
+		children,
+	} = props;
+
+	const router = useRouter();
+
+	const toolbarSrc = getToolbarSrc(repositoryName);
+
+	useEffect(() => {
+		const controller = new AbortController();
+
+		window.addEventListener("prismicPreviewUpdate", onUpdate, {
+			signal: controller.signal,
+		});
+		window.addEventListener("prismicPreviewEnd", onEnd, {
+			signal: controller.signal,
+		});
+
+		// Start the preview for preview share links. Previews from
+		// share links do not go to the `updatePreviewURL` like a normal
+		// preview.
+		//
+		// We check that the current URL is a descendant of the base
+		// path to prevent infinite refrehes.
+		if (
+			window.location.href.startsWith(
+				window.location.origin + router.basePath,
+			) &&
+			getPreviewCookieRepositoryName() === repositoryName &&
+			!router.isPreview
+		) {
+			start();
+		}
+
+		function onEnd(event: Event) {
+			event.preventDefault();
+			fetch(router.basePath + 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(() => {});
+		}
+
+		function onUpdate(event: Event) {
+			event.preventDefault();
+			start();
+		}
+
+		function start() {
+			// 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 at least
+			// attempted to set preview data.
+			fetch(router.basePath + updatePreviewURL, {
+				redirect: "manual",
+				signal: controller.signal,
+			})
+				.then((res) => {
+					if (res.type !== "opaqueredirect") {
+						console.error(
+							`[<PrismicPreview>] Failed to start or update the preview using "${updatePreviewURL}". Does it exist?`,
+						);
+
+						return;
+					}
+
+					refresh();
+				})
+				.catch(() => {});
+		}
+
+		function refresh() {
+			router.replace(router.asPath, undefined, { scroll: false });
+		}
+
+		return () => controller.abort();
+	}, [exitPreviewURL, updatePreviewURL, repositoryName, router]);
+
+	return (
+		<>
+			{children}
+			<Script src={toolbarSrc} strategy="lazyOnload" />
+		</>
+	);
+}
+
+function getPreviewCookieRepositoryName() {
+	const cookie = window.document.cookie
+		.split("; ")
+		.find((row) => row.startsWith(`${prismicCookie.preview}=`))
+		?.split("=")[1];
+
+	return (decodeURIComponent(cookie ?? "").match(/"([^"]+)\.prismic\.io"/) ||
+		[])[1];
+}

package/src/pages/enableAutoPreviews.ts

@@ -0,0 +1,62 @@
+import type { PreviewData } from "next";
+import type { Client } from "@prismicio/client";
+
+import type { NextApiRequestLike } from "./types.js";
+
+/**
+ * Configuration for `enableAutoPreviews`.
+ *
+ * @typeParam TPreviewData - Next.js preview data object.
+ */
+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<Client, "queryContentFromRef" | "enableAutoPreviewsFromReq">;
+
+	/**
+	 * The `previewData` object provided in the `getStaticProps()` or
+	 * `getServerSideProps()` context object.
+	 */
+	previewData?: PreviewData;
+
+	/**
+	 * The `req` object from a Next.js API route.
+	 *
+	 * @see Next.js API route docs: \<https://nextjs.org/docs/api-routes/introduction\>
+	 */
+	req?: NextApiRequestLike;
+};
+
+/**
+ * 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.
+ */
+export function enableAutoPreviews(config: EnableAutoPreviewsConfig): void {
+	if ("previewData" in config && config.previewData) {
+		// Assume we are in `getStaticProps()` or
+		// `getServerSideProps()` with active Preview Mode.
+
+		if (isPrismicPreviewData(config.previewData)) {
+			config.client.queryContentFromRef(config.previewData.ref);
+		}
+
+		return;
+	}
+
+	if ("req" in config && config.req) {
+		// Assume we are in an API Route.
+
+		config.client.enableAutoPreviewsFromReq(config.req);
+
+		return;
+	}
+}
+
+function isPrismicPreviewData(input: unknown): input is { ref: string } {
+	return typeof input === "object" && input !== null && "ref" in input;
+}

package/src/pages/exitPreview.ts

@@ -0,0 +1,45 @@
+import type { NextApiRequestLike, NextApiResponseLike } from "./types.js";
+
+/** Configuration for `exitPreview()`. */
+export type ExitPreviewAPIRouteConfig = {
+	/**
+	 * 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;
+};
+
+/**
+ * Ends a Prismic preview session within a Next.js app. This function should be
+ * used in an API route.
+ *
+ * @example
+ *
+ * ```typescript
+ * // src/pages/api/exit-preview.js
+ *
+ * import { exitPreview } from "@prismicio/next";
+ *
+ * export default function handler(_req, res) {
+ * 	return exitPreview({ res });
+ * }
+ * ```
+ */
+export function exitPreview(config: ExitPreviewAPIRouteConfig): void {
+	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;
+}