add e2e

Author: sommeeeer

examples/playground15/app/api/signal/revalidate/route.ts

@@ -3,7 +3,7 @@ import { revalidatePath } from "next/cache";
 export const dynamic = "force-dynamic";
 
 export async function GET() {
-	revalidatePath("/signal");
+	revalidatePath("/signal/");
 
 	return new Response("ok");
 }

examples/playground15/app/image/page.tsx

@@ -0,0 +1,11 @@
+import Image from "next/image";
+
+import tomineImg from "../../public/tomine.webp";
+
+export default function Page() {
+	return (
+		<div>
+			<Image src={tomineImg} alt="Picture of Tomine" />
+		</div>
+	);
+}

examples/playground15/e2e/image.test.ts

@@ -0,0 +1,10 @@
+import { test, expect } from "@playwright/test";
+
+test.describe("next/image with trailing slash", () => {
+	test("next/image with trailing slash", async ({ page }) => {
+		await page.goto("/image");
+		await expect(page.getByAltText("Picture of Tomine")).toBeVisible();
+		// The trailing slash should only be there if trailingSlash is enabled in next.config.ts
+		expect(await page.getAttribute("img", "src")).toMatch(/^\/_next\/image\//);
+	});
+});

examples/playground15/next.config.mjs renamed to examples/playground15/next.config.ts

@@ -1,16 +1,17 @@
 import { initOpenNextCloudflareForDev, getDeploymentId } from "@opennextjs/cloudflare";
+import { NextConfig } from "next";
 
 initOpenNextCloudflareForDev();
 
-/** @type {import('next').NextConfig} */
-const nextConfig = {
+const nextConfig: NextConfig = {
 	typescript: { ignoreBuildErrors: true },
 	eslint: { ignoreDuringBuilds: true },
 	experimental: {
 		// Generate source map to validate the fix for opennextjs/opennextjs-cloudflare#341
 		serverSourceMaps: true,
 	},
 	deploymentId: getDeploymentId(),
+	trailingSlash: true,
 };
 
 export default nextConfig;