opennextjs · conico974 · Apr 30, 2025 · Apr 29, 2025 · Apr 29, 2025 · Apr 29, 2025
diff --git a/examples/common/apps.ts b/examples/common/apps.ts
@@ -11,6 +11,7 @@ const apps = [
   "app-pages-router",
   "app-router",
   "pages-router",
+  "experimental",
   // overrides
   "d1-tag-next",
   "memory-queue",

diff --git a/examples/e2e/experimental/.gitignore b/examples/e2e/experimental/.gitignore
@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/examples/e2e/experimental/README.md b/examples/e2e/experimental/README.md
@@ -0,0 +1,3 @@
+# Experimental
+
+This project is meant to test experimental features that are only available on canary builds of Next.js.
diff --git a/examples/e2e/experimental/e2e/nodeMiddleware.test.ts b/examples/e2e/experimental/e2e/nodeMiddleware.test.ts
@@ -0,0 +1,32 @@
+import { expect, test } from "@playwright/test";
+
+// See https://github.com/opennextjs/opennextjs-cloudflare/issues/617
+test.describe("Node Middleware", () => {
+  test.skip("Node middleware should add headers", async ({ request }) => {
+    const resp = await request.get("/");
+    expect(resp.status()).toEqual(200);
+    const headers = resp.headers();
+    expect(headers["x-middleware-test"]).toEqual("1");
+    expect(headers["x-random-node"]).toBeDefined();
+  });
+
+  test.skip("Node middleware should return json", async ({ request }) => {
+    const resp = await request.get("/api/hello");
+    expect(resp.status()).toEqual(200);
+    const json = await resp.json();
+    expect(json).toEqual({ name: "World" });
+  });
+
+  test.skip("Node middleware should redirect", async ({ page }) => {
+    await page.goto("/redirect");
+    await page.waitForURL("/");
+    const el = page.getByText("Incremental PPR");
+    await expect(el).toBeVisible();
+  });
+
+  test.skip("Node middleware should rewrite", async ({ page }) => {
+    await page.goto("/rewrite");
+    const el = page.getByText("Incremental PPR");
+    await expect(el).toBeVisible();
+  });
+});
diff --git a/examples/e2e/experimental/e2e/playwright.config.ts b/examples/e2e/experimental/e2e/playwright.config.ts
@@ -0,0 +1,4 @@
+import { configurePlaywright } from "../../../common/config-e2e";
+
+// We need to disable parallel execution for the experimental app, otherwise it breaks the SSR test
+export default configurePlaywright("experimental", { parallel: false });
diff --git a/examples/e2e/experimental/e2e/ppr.test.ts b/examples/e2e/experimental/e2e/ppr.test.ts
@@ -0,0 +1,24 @@
+import { expect, test } from "@playwright/test";
+
+test.describe("PPR", () => {
+  test("PPR should show loading first", async ({ page }) => {
+    await page.goto("/");
+    await page.getByRole("link", { name: "Incremental PPR" }).click();
+    await page.waitForURL("/ppr");
+    const loading = page.getByText("Loading...");
+    await expect(loading).toBeVisible();
+    const el = page.getByText("Dynamic Component");
+    await expect(el).toBeVisible();
+  });
+
+  test("PPR rsc prefetch request should be cached", async ({ request }) => {
+    const resp = await request.get("/ppr", {
+      headers: { rsc: "1", "next-router-prefetch": "1" },
+    });
+    expect(resp.status()).toEqual(200);
+    const headers = resp.headers();
+    expect(headers["x-nextjs-postponed"]).toEqual("1");
+    expect(headers["x-nextjs-cache"]).toEqual("HIT");
+    expect(headers["cache-control"]).toEqual("s-maxage=31536000");
+  });
+});
diff --git a/examples/e2e/experimental/e2e/use-cache.test.ts b/examples/e2e/experimental/e2e/use-cache.test.ts
@@ -0,0 +1,85 @@
+import { expect, test } from "@playwright/test";
+
+test.describe("Composable Cache", () => {
+  test("cached component should work in ssr", async ({ page }) => {
+    await page.goto("/use-cache/ssr");
+    let fullyCachedElt = page.getByTestId("fullyCached");
+    let isrElt = page.getByTestId("isr");
+    await expect(fullyCachedElt).toBeVisible();
+    await expect(isrElt).toBeVisible();
+
+    const initialFullyCachedText = await fullyCachedElt.textContent();
+    const initialIsrText = await isrElt.textContent();
+
+    let isrText = initialIsrText;
+    do {
+      await page.reload();
+      fullyCachedElt = page.getByTestId("fullyCached");
+      isrElt = page.getByTestId("isr");
+      await expect(fullyCachedElt).toBeVisible();
+      await expect(isrElt).toBeVisible();
+      isrText = await isrElt.textContent();
+      await page.waitForTimeout(1000);
+    } while (isrText === initialIsrText);
+    const fullyCachedText = await fullyCachedElt.textContent();
+    expect(fullyCachedText).toEqual(initialFullyCachedText);
+  });
+
+  test("revalidateTag should work for fullyCached component", async ({ page, request }) => {
+    await page.goto("/use-cache/ssr");
+    const fullyCachedElt = page.getByTestId("fullyCached");
+    await expect(fullyCachedElt).toBeVisible();
+
+    const initialFullyCachedText = await fullyCachedElt.textContent();
+
+    const resp = await request.get("/api/revalidate");
+    expect(resp.status()).toEqual(200);
+    expect(await resp.text()).toEqual("DONE");
+
+    await page.reload();
+    await expect(fullyCachedElt).toBeVisible();
+    const newFullyCachedText = await fullyCachedElt.textContent();
+    expect(newFullyCachedText).not.toEqual(initialFullyCachedText);
+  });
+
+  test("cached component should work in isr", async ({ page }) => {
+    await page.goto("/use-cache/isr");
+
+    let fullyCachedElt = page.getByTestId("fullyCached");
+    let isrElt = page.getByTestId("isr");
+
+    await expect(fullyCachedElt).toBeVisible();
+    await expect(isrElt).toBeVisible();
+
+    let initialFullyCachedText = await fullyCachedElt.textContent();
+    let initialIsrText = await isrElt.textContent();
+
+    // We have to force reload until ISR has triggered at least once, otherwise the test will be flakey
+
+    let isrText = initialIsrText;
+
+    while (isrText === initialIsrText) {
+      await page.reload();
+      isrElt = page.getByTestId("isr");
+      fullyCachedElt = page.getByTestId("fullyCached");
+      await expect(isrElt).toBeVisible();
+      isrText = await isrElt.textContent();
+      await expect(fullyCachedElt).toBeVisible();
+      initialFullyCachedText = await fullyCachedElt.textContent();
+      await page.waitForTimeout(1000);
+    }
+    initialIsrText = isrText;
+
+    do {
+      await page.reload();
+      fullyCachedElt = page.getByTestId("fullyCached");
+      isrElt = page.getByTestId("isr");
+      await expect(fullyCachedElt).toBeVisible();
+      await expect(isrElt).toBeVisible();
+      isrText = await isrElt.textContent();
+      await page.waitForTimeout(1000);
+    } while (isrText === initialIsrText);
+    const fullyCachedText = await fullyCachedElt.textContent();
+    expect(fullyCachedText).toEqual(initialFullyCachedText);
+  });
+});
diff --git a/examples/e2e/experimental/next.config.ts b/examples/e2e/experimental/next.config.ts
@@ -0,0 +1,23 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+  cleanDistDir: true,
+  output: "standalone",
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+  typescript: {
+    // Ignore type errors during build for now, we'll need to figure this out later
+    ignoreBuildErrors: true,
+  },
+  experimental: {
+    ppr: "incremental",
+    // Node middleware is not supported yet in cloudflare
+    // See https://github.com/opennextjs/opennextjs-cloudflare/issues/617
+    // nodeMiddleware: true,
+    dynamicIO: true,
+  },
+};
+
+export default nextConfig;
diff --git a/examples/e2e/experimental/open-next.config.ts b/examples/e2e/experimental/open-next.config.ts
@@ -0,0 +1,17 @@
+import { defineCloudflareConfig } from "@opennextjs/cloudflare";
+import r2IncrementalCache from "@opennextjs/cloudflare/overrides/incremental-cache/r2-incremental-cache";
+import shardedTagCache from "@opennextjs/cloudflare/overrides/tag-cache/do-sharded-tag-cache";
+import doQueue from "@opennextjs/cloudflare/overrides/queue/do-queue";
+
+export default defineCloudflareConfig({
+  incrementalCache: r2IncrementalCache,
+  // With such a configuration, we could have up to 12 * (8 + 2) = 120 Durable Objects instances
+  tagCache: shardedTagCache({
+    baseShardSize: 12,
+    shardReplication: {
+      numberOfSoftReplicas: 8,
+      numberOfHardReplicas: 2,
+    },
+  }),
+  queue: doQueue,
+});
diff --git a/examples/e2e/experimental/package.json b/examples/e2e/experimental/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "experimental",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack --port 3004",
+    "build": "next build",
+    "start": "next start --port 3004",
+    "lint": "next lint",
+    "clean": "rm -rf .turbo node_modules .next .open-next",
+    "build:worker": "pnpm opennextjs-cloudflare build",
+    "preview:worker": "pnpm opennextjs-cloudflare preview",
+    "preview": "pnpm build:worker && pnpm preview:worker",
+    "e2e": "playwright test -c e2e/playwright.config.ts"
+  },
+  "dependencies": {
+    "@opennextjs/cloudflare": "workspace:*",
+    "next": "15.4.0-canary.14",
+    "react": "catalog:e2e",
+    "react-dom": "catalog:e2e"
+  },
+  "devDependencies": {
+    "@playwright/test": "catalog:",
+    "@types/node": "catalog:e2e",
+    "@types/react": "catalog:e2e",
+    "@types/react-dom": "catalog:e2e",
+    "typescript": "catalog:default",
+    "wrangler": "catalog:"
+  }
+}
diff --git a/examples/e2e/experimental/src/app/api/revalidate/route.ts b/examples/e2e/experimental/src/app/api/revalidate/route.ts
@@ -0,0 +1,6 @@
+import { revalidateTag } from "next/cache";
+
+export function GET() {
+  revalidateTag("fullyTagged");
+  return new Response("DONE");
+}
diff --git a/examples/e2e/experimental/src/app/favicon.ico b/examples/e2e/experimental/src/app/favicon.ico
diff --git a/examples/e2e/experimental/src/app/globals.css b/examples/e2e/experimental/src/app/globals.css
@@ -0,0 +1,42 @@
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+html,
+body {
+  max-width: 100vw;
+  overflow-x: hidden;
+}
+
+body {
+  color: var(--foreground);
+  background: var(--background);
+  font-family: Arial, Helvetica, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    color-scheme: dark;
+  }
+}
diff --git a/examples/e2e/experimental/src/app/layout.tsx b/examples/e2e/experimental/src/app/layout.tsx
@@ -0,0 +1,31 @@
+import "./globals.css";
+import type { Metadata } from "next";
+
+import { Geist, Geist_Mono } from "next/font/google";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={[geistSans.variable, geistMono.variable].join(" ")}>{children}</body>
+    </html>
+  );
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# Experimental

		This project is meant to test experimental features that are only available on canary builds of Next.js.