opennextjs · vicb · May 5, 2025 · May 5, 2025
diff --git a/examples/e2e/pages-router/e2e/amp.test.ts b/examples/e2e/pages-router/e2e/amp.test.ts
@@ -0,0 +1,15 @@
+import { expect, test } from "@playwright/test";
+
+test.describe("next/amp", () => {
+  // TODO: fix the generated error
+  // AMP Optimizer ERROR Could not download runtime version from undefined. Falling back to https://cdn.ampproject.org
+  test.skip("should load and display the timeago component", async ({ page }) => {
+    await page.goto("/amp");
+    const timeago = await page.getByTestId("amp-timeago").textContent();
+    // We can safely assume this will always show `just now` as its using `format()` from `timeago.js`.
+    // It will show `just now` if the time is less than 10s ago.
+    expect(timeago).toBe("just now");
+    const htmlEl = page.locator("html");
+    await expect(htmlEl).toHaveAttribute("amp");
+  });
+});
diff --git a/examples/e2e/pages-router/e2e/head.test.ts b/examples/e2e/pages-router/e2e/head.test.ts
@@ -0,0 +1,21 @@
+import { expect, test } from "@playwright/test";
+
+test.describe("next/head", () => {
+  test("should have the correct title", async ({ page }) => {
+    await page.goto("/head");
+    const title = await page.title();
+    expect(title).toBe("OpenNext head");
+  });
+  test("should have the correct meta tags", async ({ page }) => {
+    await page.goto("/head");
+    const ogTitle = await page.locator('meta[property="og:title"]').getAttribute("content");
+    const ogDesc = await page.locator('meta[name="description"]').getAttribute("content");
+    const time = await page.locator('meta[property="time"]').getAttribute("content");
+    expect(ogTitle).toBe("OpenNext pages router head bar");
+    expect(ogDesc).toBe(
+      "OpenNext takes the Next.js build output and converts it into packages that can be deployed across a variety of environments. Natively OpenNext has support for AWS Lambda, Cloudflare, and classic Node.js Server."
+    );
+
+    expect(new Date(time!).getTime()).toBeLessThan(Date.now());
+  });
+});
diff --git a/examples/e2e/pages-router/src/pages/amp/index.tsx b/examples/e2e/pages-router/src/pages/amp/index.tsx
@@ -0,0 +1,39 @@
+/*
+ * When doing `next build` you would get the error below:
+ * TypeScript error: Property 'amp-timeago' does not exist on type 'JSX.IntrinsicElements'.
+ * https://stackoverflow.com/questions/50585952/property-amp-img-does-not-exist-on-type-jsx-intrinsicelements/50601125#50601125
+ * The workaround in that SO post doesn't work in this (mono)repo so I ended up using @ts-expect-error and @ts-ignore
+ *
+ */
+
+export const config = { amp: true };
+
+export async function getServerSideProps() {
+  return {
+    props: {
+      time: new Date().toISOString(),
+    },
+  };
+}
+
+function MyAmpPage({ time }: { time: string }) {
+  const date = new Date(time);
+
+  return (
+    <div>
+      <p>Some time: {date.toJSON()}</p>
+      {/* @ts-expect-error AMP Component not recognized by TypeScript */}
+      <amp-timeago
+        width="0"
+        height="15"
+        datetime={date.toJSON()}
+        layout="responsive"
+        data-testid="amp-timeago"
+      >
+        .{/* @ts-ignore */}
+      </amp-timeago>
+    </div>
+  );
+}
+
+export default MyAmpPage;
diff --git a/examples/e2e/pages-router/src/pages/head/index.tsx b/examples/e2e/pages-router/src/pages/head/index.tsx
@@ -0,0 +1,28 @@
+import type { InferGetServerSidePropsType } from "next";
+import Head from "next/head";
+
+export async function getServerSideProps() {
+  return {
+    props: {
+      time: new Date().toISOString(),
+      envVar: process.env.SOME_PROD_VAR,
+    },
+  };
+}
+
+export default function Page({ time, envVar }: InferGetServerSidePropsType<typeof getServerSideProps>) {
+  return (
+    <div>
+      <Head>
+        <title>OpenNext head</title>
+        <meta property="og:title" content={`OpenNext pages router head ${envVar}`} />
+        <meta property="time" content={time} />
+        <meta
+          name="description"
+          content="OpenNext takes the Next.js build output and converts it into packages that can be deployed across a variety of environments. Natively OpenNext has support for AWS Lambda, Cloudflare, and classic Node.js Server."
+        />
+      </Head>
+      <p>This is a page!</p>
+    </div>
+  );
+}