test: add Next.js 14 test projects

e2e-projects/14-app-router/app/[uid]/page.tsx

@@ -0,0 +1,17 @@
+import { PrismicPreview } from "@prismicio/next";
+
+import { createClient } from "@/prismicio";
+
+export default async function Page({ params }: { params: { uid: string } }) {
+	const { uid } = params;
+
+	const client = await createClient();
+	const page = await client.getByUID("page", uid);
+
+	return (
+		<>
+			<div data-testid="payload">{page.data.payload}</div>
+			<PrismicPreview repositoryName={client.repositoryName} />
+		</>
+	);
+}

e2e-projects/14-app-router/app/with-custom-preview-endpoints/[uid]/page.tsx

@@ -0,0 +1,21 @@
+import { PrismicPreview } from "@prismicio/next";
+
+import { createClient } from "@/prismicio";
+
+export default async function Page({ params }: { params: { uid: string } }) {
+	const { uid } = params;
+
+	const client = await createClient();
+	const page = await client.getByUID("page", uid);
+
+	return (
+		<>
+			<div data-testid="payload">{page.data.payload}</div>
+			<PrismicPreview
+				repositoryName={client.repositoryName}
+				updatePreviewURL="/api/custom-preview"
+				exitPreviewURL="/api/custom-exit-preview"
+			/>
+		</>
+	);
+}

e2e-projects/14-app-router/next.config.mjs

@@ -0,0 +1,10 @@
+// @ts-check
+
+/** @type {import("next").NextConfig} */
+const nextConfig = {
+	images: {
+		remotePatterns: [{ hostname: "images.prismic.io" }],
+	},
+};
+
+export default nextConfig;

e2e-projects/14-app-router/package.json

@@ -0,0 +1,22 @@
+{
+	"name": "14-app-router",
+	"private": true,
+	"scripts": {
+		"dev": "next dev --port=4323",
+		"build": "next build",
+		"start": "next start --port=4323"
+	},
+	"dependencies": {
+		"@prismicio/client": "^7.13.1",
+		"@prismicio/next": "*",
+		"next": "^14",
+		"react": "^18",
+		"react-dom": "^18"
+	},
+	"devDependencies": {
+		"@types/node": "^22",
+		"@types/react": "^18",
+		"@types/react-dom": "^18",
+		"typescript": "^5"
+	}
+}

e2e-projects/14-app-router/prismicio.ts

@@ -0,0 +1,20 @@
+import * as prismic from "@prismicio/client";
+import * as prismicNext from "@prismicio/next";
+import { cookies } from "next/headers";
+import assert from "node:assert";
+
+export async function createClient(config: prismic.ClientConfig = {}) {
+	const cookieJar = cookies();
+	const repositoryName = cookieJar.get("repository-name")?.value;
+	assert(repositoryName, "A repository-name cookie is required.");
+
+	const client = prismic.createClient(repositoryName, {
+		routes: [{ type: "page", path: "/:uid" }],
+		fetchOptions: { cache: "no-store" },
+		...config,
+	});
+
+	prismicNext.enableAutoPreviews({ client });
+
+	return client;
+}

e2e-projects/14-pages-router/package.json

@@ -0,0 +1,22 @@
+{
+	"name": "14-pages-router",
+	"private": true,
+	"scripts": {
+		"dev": "next dev --port=4324",
+		"build": "next build",
+		"start": "next start --port=4324"
+	},
+	"dependencies": {
+		"@prismicio/client": "^7.13.1",
+		"@prismicio/next": "*",
+		"next": "^14",
+		"react": "^18",
+		"react-dom": "^18"
+	},
+	"devDependencies": {
+		"@types/node": "^22",
+		"@types/react": "^18",
+		"@types/react-dom": "^18",
+		"typescript": "^5"
+	}
+}

e2e-projects/15-app-router/.gitignore

@@ -0,0 +1,4 @@
+/node_modules
+/.next/
+/out/
+next-env.d.ts

e2e-projects/15-app-router/app/PrismicNextImage/page.tsx

@@ -0,0 +1,118 @@
+import { isFilled } from "@prismicio/client";
+import { PrismicNextImage } from "@prismicio/next";
+import assert from "assert";
+
+import { createClient } from "@/prismicio";
+
+export default async function Page() {
+	const client = await createClient();
+	const { data: tests } = await client.getSingle("image_test");
+
+	assert(
+		isFilled.image(tests.with_alt_text) && tests.with_alt_text.alt !== null,
+	);
+	assert(
+		isFilled.image(tests.without_alt_text) &&
+			tests.without_alt_text.alt === null,
+	);
+	assert(isFilled.image(tests.filled));
+	assert(!isFilled.image(tests.empty));
+	assert(
+		isFilled.image(tests.with_crop) &&
+			new URL(tests.with_crop.url).searchParams.get("rect") !== null,
+	);
+
+	return (
+		<>
+			<PrismicNextImage data-testid="filled" field={tests.filled} />
+			<PrismicNextImage data-testid="empty" field={tests.empty} />
+
+			<div data-testid="fallback">
+				<PrismicNextImage field={tests.empty} fallback="foo" />
+			</div>
+
+			<PrismicNextImage
+				data-testid="explicit-width"
+				field={tests.filled}
+				width={400}
+			/>
+			<PrismicNextImage
+				data-testid="explicit-height"
+				field={tests.filled}
+				height={300}
+			/>
+			<PrismicNextImage
+				data-testid="explicit-width-height"
+				field={tests.filled}
+				width={400}
+				height={300}
+			/>
+
+			<PrismicNextImage
+				data-testid="non-safenumber-width"
+				field={tests.filled}
+				// @ts-expect-error - We are purposely providing an invalid value.
+				width="NaN"
+			/>
+			<PrismicNextImage
+				data-testid="non-safenumber-height"
+				field={tests.filled}
+				// @ts-expect-error - We are purposely providing an invalid value.
+				height="NaN"
+			/>
+
+			<PrismicNextImage
+				data-testid="sizes"
+				field={tests.filled}
+				sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+			/>
+
+			<PrismicNextImage
+				data-testid="quality"
+				field={tests.filled}
+				quality={10}
+			/>
+
+			<PrismicNextImage data-testid="with-alt" field={tests.with_alt_text} />
+			<PrismicNextImage
+				data-testid="without-alt"
+				field={tests.without_alt_text}
+			/>
+			<PrismicNextImage
+				data-testid="with-decorative-fallback-alt"
+				field={tests.without_alt_text}
+				fallbackAlt=""
+			/>
+			<PrismicNextImage
+				data-testid="with-decorative-alt"
+				field={tests.without_alt_text}
+				alt=""
+			/>
+
+			<PrismicNextImage data-testid="fill" field={tests.filled} fill />
+
+			<PrismicNextImage
+				data-testid="imgix"
+				field={tests.filled}
+				imgixParams={{ sat: -100 }}
+			/>
+			<PrismicNextImage
+				data-testid="imgix-override"
+				field={tests.with_crop}
+				imgixParams={{ rect: [0, 0, 100, 100] }}
+			/>
+
+			<PrismicNextImage
+				data-testid="default-loader"
+				field={tests.filled}
+				loader={null}
+			/>
+			<PrismicNextImage
+				data-testid="default-loader-with-imgixParams"
+				field={tests.filled}
+				loader={null}
+				imgixParams={{ sat: -100 }}
+			/>
+		</>
+	);
+}

e2e-projects/15-app-router/app/PrismicNextLink/client/page.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import { useState } from "react";
+import { PrismicNextLink } from "@prismicio/next";
+
+export default function Page() {
+	const [ref, setRef] = useState<HTMLAnchorElement | null>(null);
+
+	return (
+		<PrismicNextLink ref={setRef} href="" data-testid="ref">
+			tagname: {ref?.tagName}
+		</PrismicNextLink>
+	);
+}

e2e-projects/15-app-router/app/PrismicNextLink/page.tsx

@@ -0,0 +1,99 @@
+import Link from "next/link";
+import { isFilled } from "@prismicio/client";
+import { PrismicNextLink } from "@prismicio/next";
+import assert from "assert";
+
+import { createClient } from "@/prismicio";
+
+export default async function Page() {
+	const client = await createClient();
+	const { data: tests } = await client.getSingle("link_test");
+	assert(isFilled.contentRelationship(tests.document) && tests.document.url);
+	const doc = await client.getByID(tests.document.id);
+
+	assert(isFilled.linkToMedia(tests.media));
+	assert(
+		isFilled.link(tests.internal_web) &&
+			tests.internal_web.link_type === "Web" &&
+			!tests.internal_web.url.startsWith("http"),
+	);
+	assert(
+		isFilled.link(tests.external_web) &&
+			tests.external_web.link_type === "Web" &&
+			tests.external_web.url.startsWith("http"),
+	);
+	assert(
+		isFilled.link(tests.external_web_with_target) &&
+			tests.external_web_with_target.link_type === "Web" &&
+			tests.external_web_with_target.url.startsWith("http") &&
+			tests.external_web_with_target.target,
+	);
+	assert(isFilled.link(tests.with_text) && tests.with_text.text);
+
+	return (
+		<>
+			<PrismicNextLink
+				data-testid="document-link-with-route-resolver"
+				field={tests.document}
+			/>
+			<PrismicNextLink
+				data-testid="document-link-with-link-resolver"
+				field={tests.document}
+				linkResolver={(link) => `/${link.uid}`}
+			/>
+
+			<PrismicNextLink data-testid="media-link" field={tests.media} />
+
+			<PrismicNextLink
+				data-testid="document-prop-with-route-resolver"
+				document={doc}
+			/>
+			<PrismicNextLink
+				data-testid="document-prop-with-link-resolver"
+				document={doc}
+				linkResolver={(link) => `/${link.uid}`}
+			/>
+
+			<PrismicNextLink data-testid="internal-web" field={tests.internal_web} />
+			<PrismicNextLink data-testid="external-web" field={tests.external_web} />
+			<PrismicNextLink
+				data-testid="external-web-with-target"
+				field={tests.external_web_with_target}
+			/>
+			<PrismicNextLink
+				data-testid="external-web-with-target-override"
+				field={tests.external_web_with_target}
+				target="foo"
+			/>
+			<PrismicNextLink
+				data-testid="external-web-with-rel-prop"
+				field={tests.external_web}
+				rel="foo"
+			/>
+			<PrismicNextLink
+				data-testid="external-web-with-removed-rel"
+				field={tests.external_web}
+				rel={undefined}
+			/>
+			<PrismicNextLink
+				data-testid="external-web-with-rel-function"
+				field={tests.external_web}
+				rel={(payload) => JSON.stringify(payload)}
+			/>
+
+			<PrismicNextLink
+				data-testid="external-href-prop"
+				href="https://example.com"
+			/>
+			<PrismicNextLink data-testid="internal-href-prop" href="/example" />
+			{/* @ts-expect-error - We are purposely providing an invalid `href` value. */}
+			<PrismicNextLink data-testid="falsy-href-prop" href={undefined} />
+			<Link data-testid="default-link-falsy-href" href="" />
+
+			<PrismicNextLink data-testid="with-text" field={tests.with_text} />
+			<PrismicNextLink data-testid="with-text-override" field={tests.with_text}>
+				override
+			</PrismicNextLink>
+		</>
+	);
+}

e2e-projects/15-app-router/app/api/custom-exit-preview/route.ts

@@ -0,0 +1,5 @@
+import { exitPreview } from "@prismicio/next";
+
+export function GET() {
+	return exitPreview();
+}

e2e-projects/15-app-router/app/api/custom-preview/route.ts

@@ -0,0 +1,12 @@
+import { NextRequest } from "next/server";
+import { redirectToPreviewURL } from "@prismicio/next";
+
+import { createClient } from "@/prismicio";
+
+export async function GET(request: NextRequest) {
+	const client = await createClient({
+		routes: [{ type: "page", path: "/:uid" }],
+	});
+
+	return await redirectToPreviewURL({ client, request });
+}

e2e-projects/15-app-router/app/api/exit-preview/route.ts

@@ -0,0 +1,5 @@
+import { exitPreview } from "@prismicio/next";
+
+export function GET() {
+	return exitPreview();
+}

e2e-projects/15-app-router/app/api/preview/route.ts

@@ -0,0 +1,12 @@
+import { NextRequest } from "next/server";
+import { redirectToPreviewURL } from "@prismicio/next";
+
+import { createClient } from "@/prismicio";
+
+export async function GET(request: NextRequest) {
+	const client = await createClient({
+		routes: [{ type: "page", path: "/:uid" }],
+	});
+
+	return await redirectToPreviewURL({ client, request });
+}